CSS Animation Generator
@keyframes slideUp {
from { transform: translateY(28px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.element {
animation: slideUp 900ms ease-out 0ms infinite normal;
}The CSS animation generator produces both halves of an animation: the @keyframes block and the animation shorthand that applies it. Six presets are available (fade in, slide up, pulse, spin, shake and bounce) and the preview restarts whenever you change a setting so you can see the timing.
How it works
The animation shorthand takes its values in a defined order, and the two time values are distinguished by position: the first is always the duration, the second always the delay.
animation: name duration timing-function delay iteration-count direction;
- duration
- the first time value; how long one cycle takes
- delay
- the second time value; how long before the first cycle starts
- iteration-count
- a number, or infinite
- direction
- normal, reverse, alternate or alternate-reverse
Every preset animates transform or opacity only. Those two properties can be handled by the compositor without recalculating layout, which is why they animate smoothly where properties like width and top do not.
Examples
An entrance animation
Animation
slideUp
Duration
900ms
Timing
ease-out
Iterations
1
Result
@keyframes slideUp {
from { transform: translateY(28px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.element {
animation: slideUp 900ms ease-out 0ms 1 normal;
}ease-out starts fast and settles, which suits an entrance. ease-in does the reverse and is better for something leaving the screen.
A looping attention pulse
Animation
pulse
Duration
1200ms
Iterations
infinite
Direction
alternate
Result
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.12); }
}
.element {
animation: pulse 1200ms ease-out 0ms infinite alternate;
}The keyframes already return to scale(1) at 100%, so alternate is not strictly needed here. It doubles the effective cycle length rather than changing the shape.
Frequently asked questions
Which time value in the shorthand is the delay?
The second one. The shorthand distinguishes duration from delay purely by order, so animation: fade 2s 1s runs for two seconds after a one-second wait. Reversing them silently changes the meaning, which is a common bug.
Should I add prefers-reduced-motion handling?
Yes, for anything that moves more than a small distance or loops. Wrap the animation in @media (prefers-reduced-motion: no-preference), or disable it inside a reduce block. Vestibular disorders make large or repeated motion genuinely unpleasant, and it is a two-line addition.
Why do the presets only animate transform and opacity?
Because those two can be composited on the GPU without triggering layout or paint. Animating width, height, top or left forces the browser to recalculate layout on every frame, which is the usual reason an animation stutters.
How is this different from the keyframe generator?
This tool outputs the @keyframes block plus the animation shorthand that applies it. The keyframe generator outputs the block alone, for when you already have the animation property written and just need the frames.