DESIGN TOOL

CSS Animation Generator

Build @keyframes animations visually. Define keyframes on a timeline, preview in real time, and copy the CSS.

Animation Properties

animation-name

animation-duration 1s

animation-timing-function

animation-delay 0s

animation-iteration-count

animation-direction

animation-fill-mode

Keyframe Timeline

Keyframe Properties

Offset 0%

Opacity 1

TranslateX 0px

TranslateY 0px

Rotate 0deg

Scale 1

Border Rad. 12%

Background Color

Live Preview

Generated CSS

Presets