CSS Keyframe Animation Generator
What @keyframes does
A @keyframes rule describes the steps of an animation, and the animation property decides how it runs. Unlike a transition, it needs no trigger and can define any number of intermediate stages, which is what makes loops, bounces and multi-stage entrances possible.
Syntax
animation: <name> <duration> <timing-function> <delay> <iteration-count> <direction> <fill-mode>;| Part | What it controls |
|---|---|
| @keyframes name | The step list itself, written from 0% to 100%, or with the from and to keywords for two-step animations. |
| duration | How long one cycle takes. Required — with no duration the animation never runs. |
| iteration-count | A number, or infinite for a loop. |
| direction | normal, reverse, alternate, or alternate-reverse. alternate is what makes a pulse breathe rather than restart. |
| fill-mode | What applies outside the run. forwards holds the final frame, backwards applies the first during the delay, both does each. |
| play-state | running or paused. Pausing on hover is a one-line way to let people stop a looping animation. |
Notes from practice
fill-mode: forwards is usually what you want
Without it the element snaps back to its pre-animation state the moment the animation ends, which is almost never the intent for an entrance.
Several percentages can share one block
Writing 0%, 20%, 50%, 100% { transform: translateY(0) } keeps a bounce readable instead of repeating the same declaration four times.
Animate transform and opacity only, where you can
These two are composited and skip layout and paint. Animating width, height, top or margin recalculates layout on every frame and drops frames on slower devices.
CSS Keyframe Animation Generator FAQ
How do I create a CSS animation with keyframes?
Define the steps in a @keyframes rule, then reference it: @keyframes fade { from { opacity: 0 } to { opacity: 1 } } and .box { animation: fade 400ms ease-out forwards }. The duration is required; without one the animation never runs.
What does animation-fill-mode do?
It decides what styles apply outside the animation's run. forwards keeps the last keyframe after it finishes, backwards applies the first keyframe during any delay, and both does each. Without it the element reverts to its normal styles the instant the animation ends.
How do I loop a CSS animation forever?
Set animation-iteration-count: infinite. Pairing it with animation-direction: alternate makes the animation play forwards then backwards, which is what gives a pulse or float a smooth, continuous feel instead of a jump at each restart.
How do I pause a CSS animation on hover?
Set animation-play-state: paused inside the :hover rule. The animation freezes where it is and resumes from the same point when the pointer leaves, which is a courtesy worth adding to anything that loops.
Why is my CSS animation not running?
Most often there is no duration, since animation-duration defaults to 0s. Other causes are a @keyframes name that does not match, the rule being defined after it is used inside a scoped block, or display: none on the element — a hidden element never animates.
Related generators
- Transition — Tune duration, delay and easing, including cubic-bezier curves and spring or bounce easing with linear().
- Transform 2D & 3D — Translate, rotate, scale and skew in 2D or 3D, with perspective and the newer individual transform properties.
- Motion Path — Move an element along an SVG path with offset-path and animate offset-distance.
- Scroll-driven Animation — Link an animation to scroll position with animation-timeline. Scroll the preview to see it run.
Part of CSSGen.dev — 30 free visual CSS generators with browser support built in.