CSS Animation Generator

Visually design CSS animations with a live preview, a built-in keyframe preset library (fade, slide, bounce, pulse, spin, shake, zoom, flip and more), full timing/easing/iteration control, a custom keyframe editor, and one-click clean CSS export. 100% client-side.

Live Preview

checkerboard

DEMO

Animation Presets

Preview Element

Animation Name

Duration (s)

Delay (s)

Timing Function

Iterations

∞

Direction

Fill Mode

Keyframes (transform + opacity)

Each stop controls the element state at that offset. Translate values are in px, rotate in degrees, scale 1 = original size, opacity 0–1.

Generated CSS

Copied!