Free tool No sign-up

CSS Animation Generator

Build CSS keyframe animations visually — pick a preset, tune duration, easing, direction and fill-mode, then copy the output.

animationkeyframescssgeneratoreffects

Preset

Timing

duration1s

delay0s

iterations

Easing & Direction

timing-function

direction

fill-mode

Generated CSS

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.element {
  animation: fade-in 1s ease 0s infinite normal both;
}

?

How to use

01 ▶

Pick a preset

Choose from 15 ready-made animations — fade, slide, bounce, spin, shake and more. The preview updates instantly.

02 ⏱

Set duration & delay

Drag the duration slider to control how long one cycle takes. Add a delay to stagger the animation start.

03 ∞

Choose iterations

Run the animation once, twice, three times, or loop it infinitely with the iteration control.

04 ⌇

Pick an easing

timing-function shapes the acceleration curve — ease, linear, ease-in-out, or stepped.

05 ⇄

Set direction & fill

Direction reverses or alternates playback. Fill-mode controls the element state before and after the animation.

06 ⎘

Copy the CSS

Hit "Copy CSS" to grab the full @keyframes block plus the animation shorthand, ready to paste.

</>

Basic

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.element {
  animation: fade-in 1s ease both;
}

Shorthand

/* shorthand order */
animation: name duration timing-fn delay iterations direction fill-mode;

Multiple

.element {
  animation:
    slide-up  0.4s ease-out  0s   1  normal   both,
    pulse     1.2s ease-in-out 0.4s infinite normal none;
}

Property	Description
`animation-name`	References the @keyframes rule by name.
`animation-duration`	How long one cycle takes. E.g. 1s or 300ms.
`animation-timing-function`	Easing curve: ease \| linear \| ease-in \| ease-out \| ease-in-out \| steps(n).
`animation-delay`	How long to wait before the animation starts.
`animation-iteration-count`	Number of cycles: a number or infinite.
`animation-direction`	Playback order: normal \| reverse \| alternate \| alternate-reverse.
`animation-fill-mode`	State outside the active period: none \| forwards \| backwards \| both.

✓

@keyframes and the animation shorthand have excellent browser support. No vendor prefixes needed for modern targets.

🟢 Chrome v43+

🟢 Firefox v16+

🟢 Safari v9+

🟢 Edge v12+

🟡 IE v10+