Keyframe Animation Builder

Build @keyframes Without Guessing Percentages

CSS keyframe animations are powerful but awkward to write blind. You pick an offset like 50%, guess a rotate value of 180deg, reload the page, and repeat until the motion feels right. This builder flips that workflow: add stops, adjust transform, opacity, and background color values, and watch the preview animate instantly as you type.

When the motion looks right, copy the generated @keyframes block and animation shorthand straight into your stylesheet.

Anatomy of a Keyframe Animation

The generated CSS has two parts. The @keyframes rule holds one block per keyframe stop, each containing:

• transform: a combined translate, rotate, and scale that positions and shapes the element.
• opacity: the element's transparency at that moment, from 0 to 1.
• background-color: the fill color at that stop, which can shift gradually between stops.

The second part is a class rule that applies the animation shorthand: name, duration, timing function, iteration count, direction, and fill mode. Apply that class to any element to run the animation.

Choosing Timing, Direction, and Fill Mode

• Timing function: linear moves at a constant speed, while ease, ease-in, ease-out, and ease-in-out add acceleration. Use ease-in-out for a natural swing feel.
• Iterations: a fixed count like 3 runs the animation three times, and infinite loops it forever. Loading spinners and pulsing badges usually use infinite.
• Direction: alternate plays forward then backward on each cycle, which is ideal for breathing and bobbing motions. reverse plays the animation backwards.
• Fill mode: forwards keeps the last keyframe's styles after the animation ends, backwards applies the first keyframe during any delay, and both covers both cases.

Tips for Smooth Motion

• Keep the first and last stops consistent when you want a seamless loop: copy the 0% values to 100% so the element returns to its starting pose.
• Rotate and scale combine well with a slight translate to create an orbiting or floating effect.
• Prefer animating transform and opacity, which browsers can composite on the GPU, over properties like width and top that trigger layout.
• Use the Replay button to restart the preview whenever you want to rewatch a short animation.
• Name animations descriptively like card-pulse or logo-spin, and keep names unique across your stylesheet.

How to Use the Builder

1. Set the animation name, duration, timing, iterations, direction, and fill mode.
2. Adjust the three default keyframe stops, or click Add Keyframe to insert a new stop in the largest gap and edit its values.
3. Watch the preview animate live and press Replay for a fresh look.
4. Copy the CSS output or download it as a .css file, then paste it into your project.

Related Reading

A keyframe animation pairs well with transitions for hover states, and with the transform shorthand for one-off movements. If you only need an entrance effect, combine a single keyframe animation with an animation-fill-mode of forwards so the element stays in place after it appears.

Related Tools

Explore more CSS generators for your project:

• CSS Animation Generator
• CSS Filter Generator
• CSS Gradient Generator
• CSS Minifier
• Gradient Text Generator