CSS Animation Generator

Build @keyframes animations visually. Set timing, duration, and keyframe properties with a live preview.

Keyframes

Generated CSS
Configure keyframes and timing to generate your animation CSS.

How to Use the CSS Animation Generator

  1. Choose a mode — Basic for transform/opacity animations, Multi-Property for color and background changes, or Presets for instant animations.
  2. Set the timing — Adjust duration, delay, easing function, iteration count, and direction using the controls.
  3. Edit keyframes — Each keyframe row represents a moment in the animation timeline. Set properties for 0%, 50%, 100%, or any custom percentage.
  4. Watch the preview — The preview box animates live. Use Play, Pause, and Restart to control it.
  5. Copy the CSS — Click Copy to grab the @keyframes rule and animation shorthand, ready to paste.

Understanding CSS Keyframe Animations

CSS animations let you define smooth transitions between multiple visual states over time. Unlike transitions that animate between two states on user interaction, animations play automatically and can loop indefinitely. They are defined using the @keyframes rule and controlled with the animation shorthand property.

The animation Shorthand

The full animation shorthand is: animation: name duration timing-function delay iteration-count direction fill-mode;. For example: animation: bounce 1s ease-in-out 0s infinite alternate both; This applies a pre-defined @keyframes bounce animation with the specified timing settings.

Timing Functions Explained

  • ease — Starts quickly, decelerates. The most natural motion. Default value.
  • linear — Constant speed. Good for spinning loaders and progress indicators.
  • ease-in — Slow start, then accelerates. Good for exiting animations.
  • ease-out — Fast start, decelerates. Good for entering animations.
  • ease-in-out — Slow start and end, fast middle. Smooth and natural.
  • cubic-bezier() — Full control over the speed curve with 4 values.
  • steps() — Discrete jumps. Use for sprite sheet animation and typewriter effects.

Animation Direction and Iteration

Setting animation-direction: alternate makes the animation play forward, then backward. Combined with animation-iteration-count: infinite, this creates seamless ping-pong loops without abrupt jumps. For a single play-through that retains the final state, use animation-iteration-count: 1 and animation-fill-mode: forwards.

Performance: Which Properties to Animate

Always prefer animating transform and opacity. These are the only properties that browsers can animate on the GPU compositor thread without triggering layout or paint. Animating width, height, color, or background-color triggers paint operations and can cause frame drops on complex pages. For best performance, combine CSS animations with will-change: transform, opacity on elements you know will animate frequently. Explore more with the CSS Transform Playground or the CSS Filter Playground.

Accessible Animations

Always wrap looping or decorative animations in a prefers-reduced-motion media query: @media (prefers-reduced-motion: reduce) { .element { animation: none; } }. Users with vestibular disorders, epilepsy, or motion sensitivity benefit greatly from this. The WCAG 2.1 success criterion 2.3.3 recommends providing a way to pause, stop, or hide any moving content that lasts more than five seconds.

Frequently Asked Questions

CSS keyframe animations let you animate an element through multiple states. You define what the element looks like at specific percentages of the animation timeline (keyframes), and the browser interpolates smoothly between them. They are defined with the @keyframes rule and applied with the animation property.
CSS transitions animate between two states triggered by a state change like :hover. CSS animations use @keyframes to animate through multiple states automatically, without requiring a trigger. Animations can loop, alternate direction, and have delays.
Timing functions control the speed curve of an animation. ease starts fast and slows down, linear is constant speed, ease-in starts slow, ease-out ends slow, ease-in-out starts and ends slowly. cubic-bezier() lets you create custom curves. steps() creates discrete jumps for frame-by-frame animations.
Animation-fill-mode controls what styles apply before and after the animation runs. 'forwards' keeps the final keyframe styles after the animation ends. 'backwards' applies the first keyframe styles during any delay. 'both' combines both effects. 'none' (default) reverts to original styles.
Set animation-iteration-count to 'infinite'. You can also use 'alternate' for animation-direction to make it play forward, then reverse — creating a seamless ping-pong loop. For example: animation: my-anim 2s ease-in-out infinite alternate;