CSS Animation Generator

Design and generate CSS keyframe animations directly in your browser.

Animation Type

Slide Direction

Timing

Duration (seconds) Delay (seconds) Timing Function Iteration Count Keep final state after animation (fill-mode: forwards)

Class Name

Preview

CSS Output

Runs entirely in your browser — nothing is sent to a server. Copy the CSS into your stylesheet and add the class name to any element to apply the animation.

Frequently Asked Questions

Yes — the live preview box plays the animation automatically as you adjust settings, and there's a "Replay Animation" button to trigger it again.

It keeps the element in its final animated state after the animation completes, instead of snapping back to its original state.

Yes — set Iteration Count to "infinite" in the Timing section.