CSS Animation Generator

Free tool No sign-up

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;
}

About this generator

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

?

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.

</>

CSS Animation syntax

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.

</>

CSS Animation snippets

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;
}

✓

Browser support

@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+

See it used in real designs

Browse hand-coded collections that put this tool to work.

Motion15 examples

15 Pure CSS Loading Animations

Motion21 examples

21 CSS Button Hover Effects

Motion27 examples

27 CSS Card Hover Effects