CSS animation builder
Pick or write keyframes, set the timing and watch the animation, then copy the CSS.
CSS keyframe animations you can see
CSS animations can do a lot without JavaScript: fade a card in, make a button pulse, shake an input that failed validation, spin a loader. The syntax is two parts, an @keyframes rule that describes the steps and an animation shorthand that applies it with a duration, timing function, delay, repeat count, direction and fill mode. Remembering the order and meaning of those shorthand values is where most people lose time.
Pick a preset (fade in, slide up, pulse, bounce, shake, spin) or write your own keyframes as percentage and CSS rows, set the timing options and watch the result on a sample box. The tool writes the @keyframes block and the matching animation declaration, and warns about common problems: animating layout properties, missing 0% or 100% keyframes, and ignoring reduced-motion preferences.
Rules of thumb
- UI feedback between 150 and 300 ms feels instant; entrances up to 500 ms; anything longer should earn its time.
- Use
ease-outfor things appearing andease-infor things leaving. - Animate
transformandopacity, not layout properties. - Keep infinite animations subtle and always offer a way to avoid them.
For custom easing curves and springs, use the easing curve visualizer on this site and paste the result into animation-timing-function. All generation happens in your browser.
Frequently asked questions
What is the difference between a CSS transition and an animation?
A transition animates between two states when something changes (hover, class toggle). An animation with @keyframes runs by itself, can have many steps, can loop and can start on page load.
Which properties are cheap to animate?
transform and opacity. The browser can animate them on the GPU without re-laying out the page. Animating width, height, top, left, margin or padding forces layout on every frame and can stutter.
What does animation-fill-mode do?
forwards keeps the final keyframe after the animation ends, backwards applies the first keyframe during the delay, and both does both. Without it the element snaps back to its normal style when the animation finishes.
How do I respect reduced motion preferences?
Wrap the animation in @media (prefers-reduced-motion: no-preference) or set animation: none inside a prefers-reduced-motion: reduce query. Some users get nauseous from large movement.