BROWSER TOOL

CSS animation playground Free+ Plus extras

Build CSS keyframe animations live: presets, a visual keyframe editor, timeline scrubbing, speed control and a cubic-bezier curve, then copy clean CSS.

Processed on your device · your files are never uploaded

Timeline0.00 s / 1.10 sDragging the timeline pauses the preview on that moment. Use the step buttons for single frames.

Keyframe stops5 stops

Keyframe at 0%

At %

X px

Y px

Rotate °

Scale X

Scale Y

Skew X °

Skew Y °

Opacity

Plus Per-keyframe easing controls (including steps()). About Plus

Blank fields are left out, so the browser blends them from neighbouring stops.

Keyframesfrom / to / percentages

4 keyframe blocks

Your CSS.bounce

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-60px);
  }
  60% {
    transform: translateY(-60px);
  }
  80% {
    transform: translateY(-18px);
  }
}

.bounce {
  animation: bounce 1100ms ease-in-out 0ms infinite normal none;
}

/* Respect visitors who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
  .bounce {
    animation: none;
  }
}

Animation

Preset

Animation name

Timing

Duration1100 ms

Delay0 ms

Iterations∞ infinite

Loop forever

Direction

Fill mode

Easing

Timing function

ease-in-out

Drag a handle, or focus it and use the arrow keys (Shift for bigger steps). y above 1 or below 0 overshoots.

About CSS animation playground

CSS animation playground is a sandbox for @keyframes animations. Start from a preset such as fade, slide in from any side, bounce, wobble, swing, heartbeat, rubber band, orbit or typewriter, then change the keyframes either as CSS text or in the visual editor, which lists every stop with its position, translate X/Y, rotate, scale, skew and opacity. Both views stay in sync.

Play, pause, step one frame at a time, slow down to a quarter speed or drag the timeline to any moment. The easing editor lets you drag the two handles of a cubic-bezier() curve. Large movements are fine: fit view zooms the stage out so the whole path stays visible. Copy or download the finished CSS, including a reduced-motion fallback.

With Plus you can also animate your own images and SVGs, put several objects on the stage with their own timeline tracks, play sprite sheets and image sequences frame by frame (with a walk-cycle template), set easing per keyframe, save projects, and export the whole scene as one HTML file. An experimental scene mode lets you steer an object with the keyboard around solid obstacles.

How to use it

Pick a preset animation to start from.
Edit the keyframe stops in the visual editor or as CSS text, and set the duration, delay, iterations, direction and fill mode.
Choose an easing preset or drag the handles of the cubic-bezier editor.
Use Play, Pause, the frame-step buttons, speed and the timeline to check every moment, then copy or download the CSS.

Good to know

Keyframes are applied to preview elements inside this page. Properties that depend on surrounding layout, such as animating grid tracks, may not show their full effect.
The visual editor handles translate (px), rotate and skew (deg), scale and opacity. Other transforms, such as perspective() or percentages, are kept exactly as written and edited in the text.
Values in the visual editor are kept to safe ranges (translate up to ±50,000 px, rotate up to ±36,000°, scale up to ±50, skew up to ±89°); a note says when a number was limited.
If your device asks for reduced motion, the preview does not play automatically; press Play to watch it once, or drag the timeline to see single frames.
Plus uploads are limited to PNG, JPEG, GIF, WebP and SVG files up to 1.5 MB each. They are shown as images, never run as code, and never leave your device. Saved projects live in this browser’s storage, which the browser may clear; export a project file to keep a copy.
The playground does not validate every CSS property; unsupported declarations are simply ignored by the browser, as they would be on your site.

Questions and answers

What is a cubic-bezier easing?

It describes how an animation speeds up and slows down. The curve runs from (0,0) to (1,1); the two handles you drag set its shape. Y values outside 0–1 create overshoot, like a bounce past the end point.

How does scrubbing work?

Dragging the timeline pauses the animation with a negative animation-delay, which is the standard CSS way to show an animation at an exact moment. The step buttons move one frame (1/60 s) at a time.

Should I respect reduced motion on my own site?

Yes. Wrap large or repeating movement in a @media (prefers-reduced-motion: no-preference) block, or tone it down inside prefers-reduced-motion: reduce. The copied CSS includes a reduced-motion fallback for this reason.

Which properties animate smoothly?

transform and opacity are the cheapest to animate because the browser can composite them without re-laying out the page. Animating width, height, top or left also works but costs more.

What does Plus add?

Uploaded images and SVGs, several objects with their own tracks, sprite and image-sequence animation with steps(), per-keyframe easing, saved projects with file import and export, a standalone HTML export of the whole scene, and the experimental keyboard-controlled scene mode. Everything that is free stays free.