CSS LabCSS keyframe animation generator
Choose an effect, set the timing, and the code includes the keyframes, the animation line and a reduced-motion rule.
What you get
The code has three parts. The @keyframes block names the animation and says what changes (here only opacity and transform). The animation shorthand on your element sets the name, duration, timing function, delay, repeat count, direction and fill mode. And a prefers-reduced-motion rule turns it off for people who asked their device for less motion. Copy all three.
The settings
| Setting | Meaning |
|---|---|
| Duration | How long one run takes. 0.2 to 0.6 seconds feels quick for interface changes; looping effects such as pulse are slower |
| Timing function | The speed curve. ease-in-out starts and ends slowly, linear is constant, steps(6, end) jumps in six steps. The cubic-bezier option overshoots slightly, a "springy" feel |
| Delay | Wait before starting |
| Repeat | 1, 3 or infinite |
| Direction | reverse plays backwards; alternate goes forwards then backwards |
The final word both is the fill mode: the first keyframe applies during the delay and the last one stays after the end, so an element does not jump back.
Keep it smooth and kind
- Animate
transformandopacity. They are cheap for the browser. Animatingwidth,height,topormarginmakes the browser recalculate the layout on every frame. - Never loop a big motion on content people are reading. Spinning and shaking are for loading and errors only.
- Respect reduced motion. The generated rule does this; keep it.
How do I run the animation only when the element scrolls into view?
Add the animation class with a small piece of JavaScript using IntersectionObserver, or use the newer scroll-driven animation features where they are supported.
Why does my animation not repeat when I click a button?
A CSS animation runs again only when it is removed and added again. Toggle the class off, force a reflow, then add it back.
This is an independent site. It is not connected with the W3C, MDN, Google, Apple, Mozilla or Microsoft. Browser and product names belong to their owners.