CSS Animation Generator

Create CSS keyframe animations — fade, slide, zoom, bounce, shake, pulse, spin, flip — with live preview.

How do CSS animations work?

A CSS animation has two parts: a @keyframes rule that describes the states (from/to or percentages) and the animation property on an element that sets the name, duration, easing, delay and repeat count. Pick an effect and settings, preview it, and copy the code.

Performance

Animate only transform and opacity where possible — they run on the GPU and do not trigger layout. The generated code also disables the animation for visitors who enable “reduce motion” in their system settings.

Frequently asked questions

How do I trigger it on scroll?

Add the class with an IntersectionObserver when the element enters the viewport.

What does "both" mean?

The element keeps the first keyframe before the delay and the last one after the animation ends.

Can I combine animations?

Yes, separate several animations with commas.