🎞️ CSS Animation (Keyframes) Generator
By ToolNimba Web Dev Team · Updated 2026-06-19
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 line of code. Pick a preset (fade, slide, bounce, spin or pulse), then dial in the duration, timing function, iteration count, delay and direction. A live preview box plays the animation as you tweak it, and one click copies the full CSS 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 and which direction it runs.
The animation shorthand packs several longhands into one declaration in this order: name, duration, timing-function, delay, iteration-count, direction (fill-mode and play-state can follow). For example "animation: spin 1s linear 0s infinite normal;" names the keyframes "spin", runs each cycle in one second with a constant (linear) speed, no delay, forever, in the normal forward direction. Duration and delay accept seconds (s) or milliseconds (ms), and the timing function controls acceleration: ease starts and ends slowly, linear is constant, and a cubic-bezier with values outside 0 to 1 can overshoot for a springy effect.
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 number of iterations returns the element to its starting point, which is handy for pulses and bounces that should settle where they began.
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 indicator or a pulse for a call-to-action button.
- Prototyping easing and timing choices visually before committing the values to your stylesheet.
- Teaching or learning how the @keyframes rule and the animation shorthand fit together.
How to use the CSS Keyframes Animation Generator
- Choose an animation preset: fade, slide, bounce, spin or pulse.
- Set the duration in seconds with the slider.
- Pick a timing function (ease, linear, ease-in-out or a cubic-bezier overshoot).
- Choose the iteration count, a delay and the direction.
- Watch the live preview, then click Copy to grab the @keyframes and 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.
- 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.
- 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.
Result: animation: slide-in 0.5s ease-out 0.2s 1 normal;
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 |
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 |
| 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 |
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 value is invalid and the browser ignores the whole declaration.
- 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 or left can be janky. Prefer transform (translate, scale, rotate) and opacity, which the browser can composite on the GPU for smoother results.
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 and direction.
- Timing function
- The easing curve that controls how speed changes over the cycle, such as ease, linear or a cubic-bezier.
- 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.
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.
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.
What is the order of values in the animation shorthand?
The common order is name, duration, timing-function, delay, iteration-count, direction. For example: animation: spin 1s linear 0s infinite normal. Duration comes before delay, which matters because both are times: the first time value is the duration, the second is the delay.
How do I make an animation loop forever?
Set the iteration count to the keyword infinite. In this tool, choose infinite from the iteration count menu. The animation then repeats endlessly until the element is removed or the animation 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.
Can I use these animations in any browser?
Yes. CSS @keyframes and the animation property are supported in all modern browsers without vendor prefixes. For very old browsers you would add -webkit- prefixed versions, but those are rarely needed today.