CSS Animation Generator

CSS Animation Generator creates @keyframes animations with a live preview. Choose fade, slide, scale, rotate, bounce, pulse, shake or a custom transform, then set the animation name, duration, delay, timing function (including cubic-bezier and steps), iteration count, direction, fill mode, play state and transform origin. Every value is checked against strict patterns, and the preview runs the same CSS you copy.

Small animations make interfaces feel responsive and guide attention, but keyframes and timing functions are fiddly to write and tune by hand. Experimenting visually and copying finished CSS saves time, and the optional reduced-motion rule helps keep animations accessible.

1. Choose an effect and, where offered, its variant and amount.
2. Set the animation name, duration, delay and timing function.
3. Choose iterations, direction, fill mode and transform origin.
4. Type the text for the preview element and use Play, Pause and Replay to check the motion.
5. Keep the reduced-motion option on unless you have a reason not to.
6. Copy or download the CSS and HTML.

• Fade, slide, scale, rotate, bounce, pulse and shake presets
• Custom transform with strictly validated functions
• Duration, delay, timing function, cubic-bezier and steps
• Iteration count or infinite, direction, fill mode and play state
• Transform origin keywords or custom values
• Play, Pause and Replay controls
• Optional prefers-reduced-motion rule
• Copy and download CSS, HTML and a standalone demo page

• Keep interface animations short — around 150–400 ms for most transitions.
• Animate transform and opacity for the smoothest performance.
• Avoid infinite animations on content people need to read.
• Respect reduced-motion preferences, especially for large or bouncing movement.
• Give each animation a descriptive name that won’t clash with other styles.