CSS Animation Generator
Choose a keyframe preset, then set the duration, timing function, delay, loop count, direction and fill mode. The preview plays the generated @keyframes rule, so what you see is the CSS you copy.
The animation properties are defined in the W3C CSS Animations Module Level 1. The output runs in your browser and nothing is sent to a server.
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.element {
animation: fade-in 1s ease-in-out 0s infinite alternate both;
}How to use it
- Pick a keyframe preset. Fade, slide, spin and pulse cover most UI motion.
- Set the duration and delay in tenths of a second, and choose a timing function.
- Choose how many times it runs, or loop forever, and set the direction.
- Copy the @keyframes block and the animation declaration, then apply the class to an element.
About the CSS behind it
A CSS animation is defined in two parts. The @keyframes rule describes the states, from the from frame to the to frame, and the animation property on the element decides how those states are played. The browser interpolates between the frames using the timing function. The rules are in the W3C CSS Animations Module Level 1.
animation-fill-mode controls the element before and after the animation. both applies the first frame during the delay and keeps the last frame when the animation ends, which avoids a flash when a fade starts. alternate plays forward and then backward on each loop, which suits pulses and breathing effects.
For a custom timing curve, use the cubic-bezier generator and paste its output in place of a keyword.
Frequently asked questions
- What is the order of values in the animation shorthand?
- The shorthand is name, duration, timing function, delay, iteration count, direction and fill mode. The generator writes them in that order. The two time values are told apart by position: the first is the duration and the second is the delay.
- Which properties should I animate for smooth motion?
- Prefer transform and opacity. The browser can run these on the compositor without recalculating layout. Animating width, top or margin forces layout on every frame and often looks jerky on low-powered devices.
- Why does my animation not replay when I change the class?
- Changing the name of an animation restarts it, but reapplying the same name does not. To replay the same animation, remove the class, force a reflow, and add it back. The preview on this page does that with the Replay button.
- Should I respect prefers-reduced-motion?
- Yes. Some users get dizzy or nauseous from large movement. Wrap the animation in a prefers-reduced-motion: no-preference media query, or set animation: none inside a reduce query, so the motion only plays for users who have not asked for less of it.