CSS Animation Choreographer

Build CSS keyframe animations visually — drag handles on a timeline and export @keyframes code.

Preview

Timeline (drag handles to reposition, click to select)

0%25%50%75%100%

Keyframe properties

Animation duration (seconds) Easing Iteration

Exported @keyframes CSS

Tip: Each keyframe lets you set transform (translate/scale/rotate), opacity, and background color independently. Drag handles along the timeline to change timing, or type exact percentages in the cards below.