✨

CSS Animation Generator

Choose from common animation presets, tweak duration, easing, delay and iteration count. Get live preview and copy the CSS keyframe code.

Animation Preset
Settings
1s
0s

About CSS Animation Generator

Create CSS @keyframes animations with a visual builder. Choose from popular animation types like fade, slide, bounce, rotate, and pulse, then customize duration, easing, delay, and iteration. The output includes both the @keyframes block and the animation property.

CSS Animation Properties

Duration — how long one cycle takes · Delay — wait before starting · Easing — acceleration curve · Iteration — how many times to repeat (infinite = forever) · Direction — alternate reverses on every other cycle

Frequently Asked Questions

CSS transitions respond to state changes (like :hover) and animate between two states. CSS animations use @keyframes to define multiple steps and can run automatically, loop, and have complex multi-step sequences without requiring a state change trigger.
Copy the generated CSS and paste it into your stylesheet. The output includes both the @keyframes definition and the animation shorthand property. Add the animation property to any selector you want animated.
With alternate direction, the animation plays forward on odd iterations and backward on even iterations. This creates a smooth back-and-forth effect. It's commonly used for pulse, bounce, and breathing animations.
CSS animations that use only transform and opacity are highly performant because browsers can optimize them on the GPU compositor thread without triggering layout recalculation. Avoid animating width, height, margin, or padding as these cause reflows.

About CSS Animation Generator

CSS Animation Generator helps you build @keyframes animations visually with a live preview. Set the animation name, duration, timing function, delay, iteration count, and direction — then copy the ready-to-use CSS code.

How to Use

  1. Choose an Animation Preset (fade, slide, bounce, etc.) or start from scratch.
  2. Set the Duration (in seconds) and Delay before the animation starts.
  3. Choose a Timing Function (ease, linear, ease-in-out, etc.).
  4. Set Iteration Count (1, 2, or infinite for loops).
  5. Choose Direction (normal, reverse, alternate).
  6. Click Play to preview, then Copy CSS to copy the code.

How It Works

The tool generates a CSS @keyframes block and an animation shorthand property. These are injected into a style tag on the preview element to show the animation live in your browser.

Example

A button pulse effect: duration 1s, timing ease-in-out, iteration infinite, using a scale animation from 1.0 to 1.05 and back. Paste the generated CSS into your stylesheet and apply the class to any element.

Frequently Asked Questions

Yes. CSS animations run entirely in the browser's rendering engine and don't require JavaScript. They are typically more performant than JS-based animations for simple transitions.
CSS transitions trigger on state changes (like :hover) and go from A to B. CSS animations use @keyframes to define multi-step sequences and can loop, reverse, and run automatically without user interaction.
Most visual CSS properties can be animated: transform, opacity, color, background-color, width, height, margin, padding, and more. Properties that trigger layout (like width/height) are less performant — prefer transform and opacity for smooth animations.
No. Modern browsers support CSS animations without vendor prefixes (-webkit-, -moz-). The generated CSS works in all current browsers as-is.