CSS Animation / Keyframes Generator

How to use this tool

1. Choose a preset or enter an animation name and duration.
2. Edit the start and end properties, and add intermediate keyframe stops as needed.
3. Set timing, direction, iteration count, and fill mode, then play the preview.
4. Compare the preview with the generated CSS and copy the result.

@keyframes syntax

CSS animations are defined with an @keyframes rule that describes the animation states:

@keyframes slide-in {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

You can use from / to (equivalent to 0% / 100%) or any percentage values to define intermediate states.

animation shorthand

The animation shorthand property packs all animation settings into one declaration:

animation: name duration timing-function delay iteration-count direction fill-mode;

Timing function guide

• ease: starts moderately fast, decelerates - good default for most UI transitions.
• linear: constant speed - ideal for spinning loaders and continuous motion.
• ease-in: starts slow, ends fast - good for elements leaving the screen.
• ease-out: starts fast, ends slow - natural for elements entering the screen.
• ease-in-out: symmetric slow-fast-slow - polished feel for back-and-forth transitions.

prefers-reduced-motion

Users can enable a system-level preference for reduced motion (in OS accessibility settings). Respect this with a CSS media query to disable or simplify animations:

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

This is a critical accessibility consideration. For users with vestibular disorders, motion sickness, or ADHD, excessive animation can cause physical discomfort or cognitive overload. Always test your animations with this setting enabled.

GPU compositing

For maximum performance, only animate properties that are GPU-composited: transform (translate, scale, rotate) and opacity. These bypass layout and paint stages entirely, rendering on the GPU at 60fps. Avoid animating width, height, top, left, margin, or padding, as these trigger expensive layout reflows that can cause jank on lower-end devices.

FLIP technique

The FLIP technique (First-Last-Invert-Play) is a pattern for animating layout changes smoothly using transforms. The steps:

1. First: Record the element's initial position/size.
2. Last: Apply the layout change (e.g., reorder DOM) and record the final state.
3. Invert: Use transform to move the element back to its original visual position.
4. Play: Transition transform to zero, animating to the new layout.

This allows you to animate changes that would normally require layout recalculation (like reordering grid items) by faking the motion with GPU-accelerated transforms.