What's the difference between animation-duration and animation-delay?

animation-duration is how long one cycle of the animation takes; animation-delay is how long the browser waits before starting it. A delay is useful for staggering multiple elements, like list items fading in one after another.

What does animation-fill-mode actually control?

It decides which keyframe styles apply outside the time the animation is actively running. forwards keeps the last keyframe's styles after it finishes; backwards applies the first keyframe's styles during the delay; both does both; none reverts to the element's normal styles before and after.

Why isn't my animation looping the way I expect?

Check animation-iteration-count — a number like 1 runs it once, infinite loops forever. Also check animation-direction: alternate makes even iterations play in reverse, which reads as a back-and-forth motion rather than a hard reset each loop.

Can I use this on multiple elements with different timing?

Yes — copy the @keyframes rule once, then write separate rules (or classes) with their own animation-duration, animation-delay, and other animation-* properties, all pointing at the same animation-name.

Does this tool store or upload anything?

No — every value stays in your browser tab. The CSS is generated locally and nothing is sent to a server.

CSS ANIMATION GENERATOR

Pick a preset, dial in the timing, and copy the @keyframes and animation CSS.

Preset

Timing

Duration: 2s

Delay: 0s

Timing function

Iteration count

Direction

Fill mode

CSS

@keyframes spin-animation {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.element {
  animation-name: spin-animation;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
}

How to build a CSS animation

1
Pick a preset animation: spin, pulse, bounce, fade in, slide in, or shake.
2
Adjust duration, delay, and timing function on the live preview box.
3
Set the iteration count, direction, and fill mode to match how you want the animation to repeat and hold.
4
Copy the generated @keyframes rule and animation-* properties and paste them into your stylesheet.

Questions

What's the difference between animation-duration and animation-delay?: animation-duration is how long one cycle of the animation takes; animation-delay is how long the browser waits before starting it. A delay is useful for staggering multiple elements, like list items fading in one after another.
What does animation-fill-mode actually control?: It decides which keyframe styles apply outside the time the animation is actively running. forwards keeps the last keyframe's styles after it finishes; backwards applies the first keyframe's styles during the delay; both does both; none reverts to the element's normal styles before and after.
Why isn't my animation looping the way I expect?: Check animation-iteration-count — a number like 1 runs it once, infinite loops forever. Also check animation-direction: alternate makes even iterations play in reverse, which reads as a back-and-forth motion rather than a hard reset each loop.
Can I use this on multiple elements with different timing?: Yes — copy the @keyframes rule once, then write separate rules (or classes) with their own animation-duration, animation-delay, and other animation-* properties, all pointing at the same animation-name.
Does this tool store or upload anything?: No — every value stays in your browser tab. The CSS is generated locally and nothing is sent to a server.