🎞️ CSS Animation Generator: Build @keyframes With Live Preview
By Shihab Mia · Updated 2026-07-05
Pick a preset and adjust the controls. The preview and CSS update live.
This CSS animation generator builds ready-to-paste @keyframes and animation shorthand without you writing a single line of code. Pick a preset (fade, slide, bounce, spin or pulse), then dial in duration, timing function, iteration count, delay, direction and fill-mode. A live preview box plays the animation as you tweak it, and one click copies the full CSS, both the @keyframes block and the animation rule, so you can drop it straight into your stylesheet.
What is the CSS Keyframes Animation Generator?
A CSS animation has two parts that work together. The @keyframes at-rule defines what changes and when: you list one or more stops (from, to, or percentages like 0%, 50%, 100%) and the property values the element should have at each stop. The browser then interpolates smoothly between those stops. The second part is the animation property on the element itself, which says which keyframes to play and how: the name, how long one cycle lasts, the easing curve, any delay, how many times it repeats, which direction it runs and what state it holds before and after.
The animation shorthand packs several longhands into one declaration. The full order is name, duration, timing-function, delay, iteration-count, direction, fill-mode, play-state. For example "animation: spin 1s linear 0s infinite normal forwards running;" names the keyframes "spin", runs each cycle in one second at constant (linear) speed, with no delay, forever, in the normal forward direction, holding the final frame, and playing rather than paused. Duration and delay accept seconds (s) or milliseconds (ms). A key parsing rule: when two time values appear, the first is always the duration and the second is the delay, so order matters.
The timing function controls acceleration between stops. ease (the default) starts slow, speeds up, then slows down; linear holds a constant speed and suits spinners; ease-in accelerates from zero; ease-out decelerates to a stop; and ease-in-out eases at both ends. Under the hood these are all cubic-bezier curves, and you can author your own with cubic-bezier(x1, y1, x2, y2). Setting a control point below 0 or above 1, such as cubic-bezier(0.68, -0.55, 0.27, 1.55), makes the value overshoot and spring back, which is how bouncy easings are built. The newer steps() function jumps in discrete increments and is ideal for sprite-sheet and typewriter effects.
Iteration-count is either a positive number or the keyword infinite. Direction decides how repeats play: normal restarts from the beginning each time, reverse plays backward, alternate flips direction every other cycle (forward, back, forward), and alternate-reverse starts backward then alternates. Pairing alternate with an even iteration count returns the element to its starting point, which is handy for pulses and bounces that should settle where they began. animation-fill-mode decides what happens outside the play window: forwards keeps the last keyframe after it finishes, backwards applies the first keyframe during any delay, and both does each.
Animations differ from transitions in one important way: a transition needs a trigger (a state change like :hover or a class toggle) and runs once from an old value to a new one, while a keyframes animation can run on load, loop, use many intermediate stops and play without any interaction. Reach for a transition when you are animating between two states, and for @keyframes when you need multi-stop motion, looping or autoplay. For performance, animate only transform and opacity where possible; the browser can composite these on the GPU without triggering layout or paint, so motion stays at 60 frames per second even on modest devices.
Finally, respect user preferences. People who enable "reduce motion" in their operating system can be seriously affected by large or looping movement, so wrap non-essential animation in an @media (prefers-reduced-motion: reduce) query and dial it back or switch to a simple fade. This is both an accessibility requirement under WCAG 2.1 and a courtesy that costs almost nothing to add.
When to use it
- Adding a quick fade-in or slide-in to a hero section, modal or card without hand-writing keyframes.
- Creating an infinite spin for a loading spinner or a pulse to draw attention to a call-to-action button.
- Prototyping easing and timing choices visually before committing the values to your production stylesheet.
- Building a typewriter or sprite-sheet effect with the steps() timing function.
- Teaching or learning how the @keyframes rule and the animation shorthand fit together.
- Generating an accessible animation you can safely wrap in a prefers-reduced-motion fallback.
How to use the CSS Keyframes Animation Generator
- Choose an animation preset: fade, slide, bounce, spin or pulse.
- Set the duration in seconds (or milliseconds) with the slider.
- Pick a timing function (ease, linear, ease-in-out, a cubic-bezier overshoot or steps()).
- Choose the iteration count (a number or infinite), a delay and the direction.
- Optionally set fill-mode to forwards so the element holds its final frame.
- Watch the live preview, then click Copy to grab both the @keyframes block and the animation shorthand.
Formula & method
Worked examples
You want a button that pulses forever to draw attention.
- Pick the pulse preset, which scales the element to 1.3 and back using transform.
- Set duration to 1.5s for a calm, noticeable beat.
- Choose ease-in-out so the scale speeds up then slows at each end.
- Set iteration count to infinite and direction to normal.
Result: animation: pulse 1.5s ease-in-out infinite normal;
You want a card to slide in from the left once when it appears and stay put.
- Pick the slide preset, which moves the element from translateX(-100%) to 0.
- Set duration to 0.5s and timing to ease-out for a soft landing.
- Set iteration count to 1 and add a 0.2s delay so it starts after the page settles.
- Set fill-mode to forwards so the card holds its final on-screen position instead of snapping back.
Result: animation: slide-in 0.5s ease-out 0.2s 1 normal forwards;
You want a spinner that respects users who prefer reduced motion.
- Generate a linear infinite spin: animation: spin 1s linear infinite.
- Wrap the spin in a media query so it only applies when motion is allowed.
- Inside @media (prefers-reduced-motion: reduce), set animation to none so the icon simply sits still.
Result: @media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
The animation shorthand longhands, in order
| Longhand property | What it sets | Example value |
|---|---|---|
| animation-name | Which @keyframes rule to play | fade-in |
| animation-duration | Length of one cycle | 1s or 600ms |
| animation-timing-function | Easing curve | ease-in-out |
| animation-delay | Wait before starting | 0.2s |
| animation-iteration-count | How many times it repeats | 3 or infinite |
| animation-direction | Forward, reverse or alternating | alternate |
| animation-fill-mode | State held before and after | forwards |
| animation-play-state | Running or paused | paused |
Common timing functions and how they feel
| Timing function | Behavior |
|---|---|
| ease | Slow start, fast middle, slow end (the default) |
| linear | Constant speed, good for spins and progress bars |
| ease-in | Starts slow, speeds up |
| ease-out | Starts fast, slows down |
| ease-in-out | Slow at both ends, fast in the middle |
| cubic-bezier(0.68, -0.55, 0.27, 1.55) | Overshoots past the end for a springy bounce |
| steps(4, end) | Jumps in 4 discrete steps, ideal for sprites and typewriter text |
Transition vs animation: which to reach for
| Aspect | transition | @keyframes animation |
|---|---|---|
| Trigger | Needs a state change (:hover, class toggle) | Can run on load, no trigger needed |
| Stops | Two states only (start to end) | Many stops (0% to 100%) |
| Looping | No native loop | Loops with iteration-count |
| Best for | Hover and focus effects, simple A to B | Loaders, entrances, multi-step motion |
Common mistakes to avoid
- Forgetting to define the @keyframes. The animation property only references a keyframes name. If the matching @keyframes rule is missing or misspelled, nothing animates. Copy both blocks this tool outputs, not just the shorthand line.
- Leaving off the time unit. Duration and delay must include a unit: write 1s or 500ms, never a bare 1 or 500. A unitless time is invalid and the browser drops the whole declaration.
- Swapping duration and delay. In the shorthand the first time value is the duration and the second is the delay. Writing "animation: fade 0.2s 1s" means a 0.2s animation that waits 1s, which is probably the reverse of what you wanted.
- Expecting the element to keep its end state. By default an element snaps back to its original styles when the animation ends. Add animation-fill-mode: forwards to hold the last keyframe, or both to also apply the first keyframe during any delay.
- Animating layout properties for smooth motion. Animating width, height, top, left or margin forces layout and paint on every frame and can be janky. Prefer transform (translate, scale, rotate) and opacity, which the browser composites on the GPU for smoother results.
- Ignoring users who prefer reduced motion. Large or looping motion can trigger nausea or discomfort. Wrap non-essential animation in @media (prefers-reduced-motion: reduce) and reduce or remove it there. This is a WCAG 2.1 accessibility expectation.
Glossary
- @keyframes
- A CSS at-rule that defines the stages of an animation and the property values at each stage.
- Animation shorthand
- A single animation property that combines name, duration, timing-function, delay, iteration-count, direction, fill-mode and play-state.
- Timing function
- The easing curve that controls how speed changes over the cycle, such as ease, linear, cubic-bezier or steps.
- cubic-bezier
- A timing function defined by two control points; values outside 0 to 1 make the animation overshoot for a spring effect.
- steps()
- A timing function that advances in discrete jumps rather than smoothly, used for sprite sheets and typewriter text.
- Iteration count
- How many times the animation runs, given as a number or the keyword infinite.
- Direction
- Whether each cycle plays forward (normal), backward (reverse) or alternates between the two.
- Fill mode
- What styles apply before and after the play window: forwards holds the last frame, backwards applies the first during the delay, both does each.
- prefers-reduced-motion
- A media query that detects when a user has asked their system to minimize motion, so you can reduce or disable animation.
Frequently asked questions
What does this CSS animation generator produce?
It outputs two things: the @keyframes at-rule that defines the animation stages, and the animation shorthand you apply to an element. Together they are everything you need. Just paste both into your stylesheet and add the class to your element, no manual coding required.
How do @keyframes and the animation property work together?
The @keyframes rule names an animation and lists property values at each stage (from, to or percentages). The animation property on an element references that name and sets how it plays: duration, easing, delay, repeat count and direction. One defines what happens, the other controls how it happens.
What is the order of values in the animation shorthand?
The order is name, duration, timing-function, delay, iteration-count, direction, fill-mode, play-state. For example: animation: spin 1s linear 0s infinite normal forwards. Duration comes before delay, and that ordering matters because both are time values, so the first is read as duration and the second as delay.
How do I make a CSS animation loop forever?
Set the iteration count to the keyword infinite, for example animation: spin 1s linear infinite. In this tool, choose infinite from the iteration count menu. The animation repeats endlessly until the element is removed or the animation property is cleared.
Why does my element jump back after the animation finishes?
By default the element returns to its pre-animation styles when the cycle ends. To keep the final keyframe, add animation-fill-mode: forwards. Use both if you also want the first keyframe applied during the delay before it starts.
What is the difference between a CSS transition and a CSS animation?
A transition animates between two states and needs a trigger such as :hover or a class change, running once from an old value to a new one. A @keyframes animation can define many intermediate stops, loop, and run on page load with no interaction. Use a transition for simple hover effects and @keyframes for loaders, entrances and multi-step motion.
Which CSS properties are cheapest to animate for smooth 60fps motion?
Animate transform (translate, scale, rotate) and opacity. The browser can composite these on the GPU without recalculating layout or repainting, so motion stays smooth. Avoid animating width, height, top, left or margin, which force layout on every frame and often cause jank.
How do I make my animations respect prefers-reduced-motion?
Wrap non-essential animation in @media (prefers-reduced-motion: reduce) and set animation to none or swap in a gentle fade inside that query. This turns off large or looping motion for users who have enabled reduced motion in their operating system, meeting WCAG 2.1 accessibility guidance.
How do I create a typewriter or sprite-sheet effect?
Use the steps() timing function, for example animation: type 2s steps(20, end) forwards. Instead of interpolating smoothly, steps() advances the animation in a fixed number of discrete jumps, which reveals text one character at a time or flips through frames of a sprite sheet cleanly.
Do CSS animations need vendor prefixes in 2026?
No. CSS @keyframes and the animation property are supported unprefixed in all modern browsers, including Chrome, Firefox, Safari and Edge. The old -webkit- prefixes are only needed for very old browser versions that almost no one uses today, so plain unprefixed CSS is safe.
Can I pause a CSS animation and resume it later?
Yes. Set animation-play-state to paused to freeze the animation at its current frame and running to resume it. A common pattern is to pause on :hover, for example .marquee:hover { animation-play-state: paused; }, so a scrolling banner stops when the user points at it.
Sources
- Using CSS animations , MDN Web Docs
- animation shorthand property , MDN Web Docs
- prefers-reduced-motion media query , MDN Web Docs