✨ CSS Animation Generator

Preview common CSS keyframe animations, tune duration, delay and easing, then copy a small standalone animation block. The preview honours reduced-motion preferences; use motion as polish, never as the only way to communicate important information.

Animation

Duration (seconds)

Delay (seconds)

Timing

Repeat

Presets:

MOTION

Preview is visual only — click replay after changing settings.

Standalone CSS