CSS & Layout

CSS Animation Builder

Pick a preset or drag the sliders to shape each keyframe, watch the live preview loop, then copy production-ready @keyframes CSS. Everything runs in your browser — nothing is sent to a server.

Runs in your browser v1.0.0

Start from a preset

Click to load

Keyframes

2 steps

Each step is a percentage along the animation. Tick a property to animate it at that step; the browser fills in everything in between.

Tip: a step only needs the properties that are changing. Leave the rest unticked and the browser interpolates from the surrounding steps.

Animation settings

Animation name

Duration

Delay

Easing

Iterations

Direction

Fill mode

Rule selector

Live preview

Playing

Preview

The preview uses the exact CSS shown below.

CSS output

How it works

Each step maps to a @keyframes selector such as 0% or 50%. Ticking a property writes its declaration for that step; unticked properties are left out so the browser interpolates between the steps around them. Move, Scale and Rotate are combined into a single transform, and Opacity is written as a 0–1 value. The generated animation shorthand is applied to the preview verbatim, so what you see is what you copy. The optional share link keeps your settings in the URL fragment, which never leaves your browser.