What the CSS Animation Generator does
This CSS animation generator builds @keyframes animations from a timeline of keyframes - opacity, movement, scale, rotation and background colour at any percentage - with duration, delay, iteration count, direction, fill mode and a timing function you can pick, draw as a cubic-bezier curve, or split into steps. Every animation it writes comes with a prefers-reduced-motion rule.
The preview plays the exact CSS you will copy, and it respects your own device's motion setting, so you can see both versions. Nothing is uploaded; the CSS is assembled in your browser.
How to use it
- Start from an example - fade up, pop in, shake or pulse - or edit the keyframe rows. Each row is one point on the timeline, from 0% to 100%.
- Leave opacity empty on a keyframe to keep whatever the element already has; movement, scale and rotation are combined into one transform so they animate together.
- Set the duration, delay, iteration count (a number or infinite), direction and fill mode. Fill mode both is usually right for entrance animations, so the element stays in its final state.
- Choose a timing function. Pick cubic-bezier() to type your own control points and watch the curve; values of y above 1 or below 0 make the motion overshoot.
- Choose the reduced-motion fallback - remove the animation, or keep only its opacity changes - then copy the CSS or download it.
Reading the results
The output has three parts: the @keyframes block, a class that applies it with the animation shorthand, and a @media (prefers-reduced-motion: reduce) block for people who have asked their system for less motion.
Every keyframe carries the full transform list (translate, scale, rotate) even when some parts are unchanged. Browsers can only interpolate smoothly between transforms with matching function lists, so this keeps the motion predictable.
The easing curve plots progress (vertical) against time (horizontal). A steep start means a quick start; a curve that rises above the top line overshoots its end value and settles back.
Worked example: the fade-up entrance, line by line
The fade-up example writes 0% { opacity: 0; transform: translate(0, 16px) scale(1) rotate(0deg); } and 100% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }: the element starts invisible and 16px low, and ends in place.
The class rule is animation: fade-up 400ms ease-out 0ms 1 normal both;. ease-out is cubic-bezier(0, 0, 0.58, 1), which moves fast at first and slows at the end, the natural feel for something arriving.
The reduced-motion block sets animation: none for the same class, so people who prefer less motion simply see the element in its final state. With fill mode both and no animation, nothing is hidden: the element's normal styles apply.
Motion and accessibility
Large or repeating movement can trigger nausea and dizziness for people with vestibular disorders, and it distracts everyone who is trying to read. Operating systems let people ask for reduced motion, and CSS exposes that choice as prefers-reduced-motion. WCAG 2.2 success criterion 2.3.3 recommends that motion triggered by interaction can be turned off, and 2.2.2 requires a way to pause anything that moves automatically for more than five seconds.
Keeping only the opacity change is often a good middle ground: the element still fades in, but nothing slides, zooms or spins.
Limitations: what the result does not prove
- The generator animates opacity, translate, scale, rotate and background colour. Other properties can be added to the CSS by hand; prefer transform and opacity, which browsers can animate without re-laying out the page.
- Iterations above 1 with infinite or long durations produce the WCAG 2.2.2 warning, but the tool cannot add the pause button your page may need.
- The preview element is a simple box. Animations on elements with layout-affecting properties or inside transformed parents can look different in your page.
- steps() jump positions follow CSS Easing Level 1; the curve drawn for them is a sketch of the staircase.
Privacy: where your data goes
Everything you paste, type or drop is processed in this browser tab. It is not uploaded, logged, stored or sent to analytics. Session recording and tag-manager scripts are switched off on this page.
Standards and sources
- CSS Animations Level 1 - checked 19 Sep 2026
- W3C - CSS Easing Functions Level 1
- W3C - Understanding WCAG 2.2: Animation from Interactions (2.3.3)
- MDN - prefers-reduced-motion
Frequently asked questions
What is the difference between a CSS transition and an animation?
A transition runs when a property changes, from the old value to the new one, and needs a trigger such as hover or a class change. An animation runs on its own through any number of keyframes and can repeat, alternate and start after a delay.
What does animation-fill-mode: both do?
It applies the first keyframe's styles during any delay before the animation starts, and keeps the last keyframe's styles after it ends. Without it, an element can flash in its normal state before a delayed fade-in, or jump back when the animation finishes.
How do I write a bounce or overshoot with cubic-bezier?
Give one of the y control points a value above 1, for example cubic-bezier(0.34, 1.56, 0.64, 1). The motion then passes its end value and settles back. The x values must stay between 0 and 1, or the timing function is invalid.
Why does my animation jump instead of rotating smoothly?
Usually because keyframes list different transform functions, or the same functions in a different order. Browsers then interpolate the raw matrices, which can take a shortcut. This generator always writes the same function list in every keyframe to avoid that.
How do I respect prefers-reduced-motion?
Add a media query for prefers-reduced-motion: reduce that removes or softens the animation. The generated CSS includes one automatically, either turning the animation off or swapping it for an opacity-only version.
Which properties are cheapest to animate?
opacity and transform can usually be animated by the browser's compositor without recalculating layout or repainting, so they stay smooth even on modest phones. Animating width, height, top or margin forces layout on every frame and often stutters.
Last reviewed by the A2Z.Tools team against the sources listed above.
