CSS Animation Generator

Generate CSS animations with keyframes. Set timing, duration, delay, iteration count, and direction.

Controls
Preview
Preview
CSS Code
/* Select controls above */

Frequently Asked Questions

What is a CSS animation?

CSS animations gradually change CSS properties over time using keyframes, allowing elements to move, fade, grow, and transform.

What does fill-mode do?

Fill-mode controls what styles apply before and after the animation. 'forwards' keeps the final state, 'backwards' applies the initial state before delay.