About CSS Keyframe Generator

Generate @keyframes animations from step definitions. Part of the DevTools Surf developer suite. Browse more tools in the Animation / CSS collection.

Use Cases

• Frontend developers creating entrance and exit animations
• UI designers prototyping motion design in pure CSS
• Email developers building animations that work without JavaScript
• Marketing developers adding attention-grabbing hero animations

Tips

• Define at least three keyframe stops for smooth animations
• Use transform properties instead of top/left for GPU acceleration
• Add animation-fill-mode: forwards to persist the final state

Fun Facts

• CSS @keyframes were introduced in the CSS Animations Level 1 specification, first drafted in 2009 — WebKit (Safari) was the first browser to implement them with the -webkit- prefix.
• The 12 Principles of Animation from Disney's 1981 book 'The Illusion of Life' directly influence CSS animation design — squash, stretch, and anticipation all apply to UI motion.
• Hardware-accelerated CSS animations using transform and opacity can run at 60fps on the compositor thread, while animations on layout properties like width trigger expensive repaints.

FAQ

How do I define steps?

Percentage-based: 0% (start), 50% (middle), 100% (end), plus any in-between. Each step has its own properties and values.

Does it preview the animation?

Yes — live preview loops the animation. Adjust parameters and see the change immediately.

What about easing between keyframes?

Linear by default between consecutive keyframes. Toggle per-step easing (ease-in-out) for more natural motion.

Can I export as SVG SMIL?

CSS only in this tool. For SVG-specific animation (animate, animateTransform), use an SVG-focused tool.