CSS Animation Generator

Create CSS keyframe animations visually with live preview. Choose from presets like bounce, pulse, shake, spin. Adjust duration, timing, and more. Copy the CSS code. Free online tool.

Preview

Animation preset

Duration

1.0s

Timing function

Delay

0.0s

Iterations

Infinite

Direction

Fill mode

CSS Output

Reference

What are CSS animations?

CSS animations allow you to animate transitions between CSS property values over time. They consist of two parts: @keyframes rules that define the animation stages, and the animation property that controls timing, direction, and playback.

Animation presets

This tool includes common animation presets: bounce (vertical bounce), pulse (scale up and down), shake (horizontal shake), spin (360° rotation), fadeIn/fadeOut (opacity transitions), slideIn/slideOut (translate from side), swing (pendulum rotation), and wobble (asymmetric shake).

Privacy

All animation generation runs 100% in your browser. No data is sent to any server.

← Back to all tools