Free Online Tool

CSS Animation Generator

Build CSS keyframe animations visually. Configure timing, easing, transforms, and effects — then copy the ready-to-use CSS.

Animation

Preset

Name

Duration

0.8s

Delay

Iteration

Easing

Direction

Fill mode

Element

Width (px)

Height (px)

Border radius (px)

10px

Colors

Live Preview

Generated CSS

CSS Animation Generator

CSS animations use the @keyframes rule to define animation states. This generator covers all animation-* properties: duration, delay, iteration, easing, direction, and fill mode.

CSS Animation Properties

animation-duration — how long one cycle takes
animation-timing-function — the easing curve (ease, cubic-bezier, steps)
animation-iteration-count — how many times to play (or infinite)
animation-fill-mode: forwards — keeps the end state after animation finishes
animation-direction: alternate — plays forwards then backwards