Skip to main content

CSS Keyframe Animation Generator

Build CSS @keyframes animations stop by stop with a live preview, then copy the keyframes and animation shorthand.

Runs 100% in your browser

Shortcuts
Copy the output
Alt + Shift + C

Your input is saved in this browser only. Reset clears it.

Live Preview

animation shorthand

animation: myAnimation 0.6s ease-out infinite normal both;

Keyframe Stops (2)

%
%

Generated CSS

@keyframes myAnimation {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.element {
  animation: myAnimation 0.6s ease-out infinite normal both;
}

How to use the CSS Animation Keyframe Builder

  1. Add keyframe stops and set property values for each one.

  2. Adjust the duration, easing, iterations, direction, and fill mode while the preview plays.

  3. Copy or download the @keyframes block and animation shorthand.

Example: A fade-and-rise entrance animation

Stops
0%:   opacity 0, transform translateY(16px) scale(0.95)
100%: opacity 1, transform translateY(0) scale(1)
Duration 0.6s, ease-out
CSS
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.element {
  animation: fadeInUp 0.6s ease-out infinite normal both;
}

Only opacity and transform are animated here, so the browser can run it on the compositor without re-running layout.

Frequently Asked Questions

How do CSS @keyframes work?

A @keyframes rule names an animation and lists property values at percentages of its duration. The browser interpolates between the stops. You then apply it with the animation shorthand: animation: fadeIn 0.6s ease-out both.

What is the difference between a transition and an animation?

A transition animates from one state to another when something changes, such as a hover. A keyframe animation runs on its own, can have many steps, and can repeat. Use transitions for state changes and keyframes for looping or multi-step motion.

Which properties are cheap to animate?

transform and opacity, because the browser can handle them on the compositor without re-running layout or paint. Animating width, height, top, or margin forces layout on every frame and is the usual cause of janky animation.

How do I respect users who prefer reduced motion?

Wrap decorative animation in @media (prefers-reduced-motion: no-preference), or disable it inside @media (prefers-reduced-motion: reduce). Keep essential feedback, but replace movement with a fade or an instant state change for those users.

About the CSS Animation Keyframe Builder

CSS @keyframes animations can be tedious to write by hand — you need to remember the right property names, juggle percentage stops, and mentally simulate what the animation looks like. This tool lets you build animations interactively: add stops, set property values, and watch the preview update in real time.

8 Free Tools for JSON, Color, and CSS Work shows how this builder fits with the easing and clip-path editors.

Animation Settings

Property What it controls
duration How long one cycle takes in seconds
timing-function The easing curve — ease-out for natural motion, linear for constant speed
iteration-count How many times the animation plays (infinite for looping)
direction normal plays 0→100%; alternate bounces 0→100→0%
fill-mode both is usually what you want — persists the end state

Commonly Animated Properties

transform

translateX/Y, rotate, scale, skew — GPU-accelerated

opacity

Fade in/out — also GPU-accelerated

background-color

Color transitions

border-radius

Morph between shapes

filter

blur(), brightness(), drop-shadow()

clip-path

Animate shapes (use our Clip Path tool)

Performance tip

For smooth 60fps animations, stick to transform and opacity. These run on the compositor thread and don't trigger layout or paint. Animating width, height, or margin forces the browser to recalculate layout on every frame.

Pro Tip: combine with clip-path

Animating clip-path between two polygon shapes with the same point count creates striking reveal effects. Use the Clip Path Generator to build your shapes, then paste the values as keyframe property values here.