CSS Keyframes Builder
Pick an effect such as fade, slide, bounce or shake, set how strong it is and how long it takes, and replay it as often as you like.
The preview always plays the animation, even if your device asks for less motion, so you can see the effect. The orange fill is not part of the CSS.
About CSS Keyframes Builder
CSS animations are written in two parts: a keyframes rule that describes the motion and an animation property that runs it. Both have fiddly syntax, and the shorthand has seven values in a fixed order. This builder writes the pair for you from a list of common effects, and plays the result so you can judge it.
Choose an effect, adjust its single strength setting, then set the duration, delay, repeats, direction and fill mode. Switch on the reduced motion option to add a short media query that turns the animation off for visitors who ask for less movement. Everything is ready to paste into a stylesheet.
How to use CSS Keyframes Builder
- Choose an effect and set its strength.
- Set the duration, delay, timing and how many times it repeats.
- Press Play again to watch it as often as you like.
- Copy the keyframes and animation rule.
Common uses
- Fading content in as a page loads
- Giving an error field a short shake
- Adding a gentle floating effect to an icon
- Learning how keyframes and the animation shorthand fit together
Frequently asked questions
What does fill mode do?
It decides what the element looks like before the animation starts and after it ends. Both keeps the first frame during a delay and the last frame afterwards. None snaps back to the normal style when the animation finishes.
What is the order of the animation shorthand?
Name, duration, timing function, delay, iteration count, direction and fill mode. The tool writes them in that order. Durations must have a unit, and the first time value is always the duration.
Why add the reduced motion rule?
Some people feel unwell or distracted by movement and ask their system for less of it. A prefers-reduced-motion rule respects that. The preview here ignores it so you can always see the effect.
Which properties are cheapest to animate?
Transform and opacity, because the browser can change them without recalculating the layout of the page. Animating width, height or position is slower and can look jerky on weaker devices.