Building CSS animations by eye

Pick an entrance, attention or exit effect, watch it on a live element, and adjust duration, delay, easing and the transform values until it reads the way you want. The generated @keyframes and the class that uses them are produced as you go, ready to copy as CSS, Tailwind or React.

Easing is what separates an animation that feels designed from one that feels mechanical. A custom cubic-bézier curve gives you control that the named keywords — ease, ease-in-out — cannot, and the curve editor here shows the effect immediately.

The output respects prefers-reduced-motion when you ask it to, so the animation is skipped for visitors who have asked their system for less movement.