Visual timeline → production-ready CSS. Click the track to add stops, drag to reposition.
Click track to add stop · Drag stop to reposition · Click stop to edit
Edit Keyframe @ 0%
Presets load into the timeline — you can then customize any keyframe or setting.
Keyframes: 0 stops · Shorthand ready to paste
/* Add keyframes on the timeline →\n then copy your animation CSS here */
Usage: Paste @keyframes block in your stylesheet. Apply via animation: myAnimation 1s infinite on any element. The shorthand button copies just the animation: property line.
CSS Animation Tips
Keyframe animations are the backbone of modern UI motion — here's what to know before shipping.
301 vs animation shorthand
Always set both @keyframes and the animation: property. The shorthand order is: name duration easing delay iterations direction fill.
Performance: what to animate
Stick to transform and opacity — they run on the GPU compositor thread. Avoid animating width, height, or top/left which cause expensive reflows.
will-change
Add will-change: transform to elements that animate. Hints the browser to promote the layer upfront, reducing jank on first play.
Reduced motion
Always wrap animations in @media (prefers-reduced-motion: no-preference) to respect accessibility settings for users who are sensitive to motion.