How to use the css animation generator
- Pick an animation preset such as fade in, slide up, bounce, shake or spin. The keyframes and class names fill in.
- Set the duration, delay, timing, how many times it repeats, the direction and the fill mode.
- For slide, bounce and shake, set the distance in pixels.
- Watch the preview, press Replay preview to run it again, then copy the CSS.
What you get
The output has two parts. The @keyframes block lists what the element looks like at points along the animation, written as percentages. The class rule applies it with the animation shorthand: name, duration, timing function, delay, repeat count, direction and fill mode, in that order. A fade in one second with the default settings gives animation: fadeIn 1s ease 0s 1 normal both.
Add the class to any element to play the animation. The shorthand is written out in full, so it is easy to read and to edit one value later.
Choices that matter
Timing controls how speed changes: linear is steady, ease starts and ends gently, ease-in starts slowly, ease-out ends slowly and ease-in-out does both. Fill mode decides what the element looks like before and after the animation: forwards keeps the last frame, backwards applies the first frame during the delay, and both does both. Direction alternate plays forward then backward on each repeat.
The reduced motion option adds a media query that turns the animation off for visitors whose device asks for less motion. It is on by default. Spinning and bouncing effects can be uncomfortable for some people, so keep motion short and avoid it for essential content.
About the preview
The preview plays the same keyframes with the browser's animation API on a sample box. It does not load the CSS you copy, so check the real page too. If your device asks for reduced motion, the preview only plays when you press Replay. For other effects see the box shadow generator, the text shadow generator and the CSS formatter. Nothing is uploaded.
Assumptions and limits
- Names must be valid CSS identifiers: letters, digits, hyphens and underscores, not starting with a digit.
- Duration must be more than 0 and at most 3,600 seconds. Repeat is a number or infinite.
- The presets are simple starting points. Edit the keyframes in your own stylesheet for more control.
- The preview is an approximation made with the web animations API.
Frequently asked questions
How do I make a CSS animation repeat forever?
Set Repeat to infinite. The rule then reads animation: name 1s ease 0s infinite normal both, and the preview loops.
What does fill mode both do?
The element takes the first keyframe during any delay and keeps the last keyframe after the animation ends, so it does not jump back to its original look.
Why add a reduced motion rule?
Some visitors turn on a device setting to limit motion. The media query respects it by switching the animation off for them.
Can I change the keyframes?
Yes. Copy the CSS and edit the percentages and properties in your stylesheet. The generator covers common effects only.