CSS Animation Playground
Preview and customise CSS keyframe animations live, then copy the ready-to-use CSS code.
Sobre esta ferramenta
The CSS Animation Playground lets you experiment with CSS keyframe animations in real time without writing a single line of code. Choose from eight pre-built animation presets — bounce, fade, slide, rotate, shake, pulse, flip, and swing — and watch a preview box animate instantly. Fine-tune every parameter: duration (0.1 s to 10 s), delay, timing function (ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier), iteration count (1 to infinite), and fill mode (none, forwards, backwards, both). The CSS code panel updates live, showing the exact @keyframes block and animation shorthand property you need. Copy the code with one click and paste it straight into your stylesheet. Great for learning CSS animations, prototyping UI micro-interactions, or quickly generating animation code for a project.
Como usar
- 1 Select an animation preset from the grid (bounce, fade, slide, etc.).
- 2 Adjust duration, delay, timing function, iteration count, and fill mode.
- 3 Watch the preview box animate live as you change settings.
- 4 Click the preview box to replay the animation at any time.
- 5 Copy the CSS code from the output panel and paste it into your project.
Reading the animation shorthand, one slot at a time
Every CSS animation boils down to a @keyframes block that defines the motion and an animation property that controls how it plays. This playground lets you tune the playback half visually and watch it run on a live box, then copies the exact CSS — both the keyframes and the shorthand — for you to paste into a stylesheet. The single line it generates looks like animation: bounce 1.0s ease 0.0s 1 none;, and learning to read that shorthand is half the battle. The slots, in order, are: name, duration, timing-function, delay, iteration-count, fill-mode. Get the order wrong by hand and the browser silently ignores the malformed value; the tool always emits them correctly.
The eight motions and what each keyframe set does
The presets aren't decorative labels — each is a real keyframe definition with specific values:
| Preset | What the keyframes do |
|---|---|
| Bounce | Translates 30px up at the midpoint, with eased timing functions baked into the keyframes for a natural fall |
| Fade | Ramps opacity 0 → 1 → 0, so it appears then disappears |
| Slide | Moves from −60px to +60px on the X axis while fading in and back out |
| Rotate | A full 0° → 360° spin |
| Shake | Rapid ±8px horizontal jitters — the classic "invalid input" cue |
| Pulse | Scales to 1.25× and back, like a heartbeat |
| Flip | A 3D rotateY spin with perspective for depth |
| Swing | Rocks back and forth around a top anchor via transform-origin |
Selecting a preset swaps both the preview and the generated keyframes instantly, so you can read exactly how, say, the bounce achieves its weight by putting easing inside the keyframes rather than only on the outer property.
A worked example
Pick Shake, drag duration to 0.5s, leave delay at 0.0s, set the timing function to linear, and set iterations to 1. The tool writes:
animation: shake 0.5s linear 0.0s 1 none;
paired with the shake keyframes. That is a textbook form-error shake: short, runs once, linear so the jitter feels mechanical rather than eased. Click the preview box (or change any control) to replay it — the tool restarts the animation by briefly setting animation-name: none, forcing a reflow, then restoring it, which is the standard trick for re-triggering a CSS animation without reloading the page.
The timing functions, demystified
The timing function controls the pace within each cycle, not the total time. The dropdown offers the five standard easings plus two instructive special cases. cubic-bezier(0.68, -0.55, 0.27, 1.55) is a "back" curve — the negative and over-1 control points make the element overshoot and settle, giving a springy feel. steps(5, end) is completely different: instead of smooth motion it jumps in five discrete frames, which is how sprite-sheet and typewriter effects are built. Switching between these on the same preset is the fastest way to feel what easing actually does.
Iteration count and fill mode
- Iteration count sets how many times the animation runs. Choose a number, or
infinitefor loops like a spinner. The custom field lets you enter an exact count up to 99. - Fill mode decides what styles apply outside the animation's active window.
none(the default) snaps back to the element's normal style when done.forwardsholds the final keyframe — essential when you animate something in and want it to stay.backwardsapplies the first keyframe during the delay, andbothdoes both.
Common mistakes this tool helps you avoid
- Element snapping back after the animation. If a fade-in flashes and then vanishes, you forgot
fill-mode: forwards. Switch it here and the end state sticks. - Putting shorthand slots out of order. The browser can confuse duration and delay (both are times). The tool always emits duration first, delay fourth, so playback matches your intent.
- Overusing
infinite. Endless motion is fine for loaders but distracting for content; for UI feedback, one or two iterations is usually right. - Ignoring reduced-motion users. The generated CSS is a starting point — wrap it in a
@media (prefers-reduced-motion: no-preference)query in production so motion-sensitive visitors aren't forced into animation.
Everything runs locally
The preview is driven by injecting your keyframes into a live <style> element on the page, and the copied CSS is assembled in JavaScript on your device. No code or settings are sent anywhere, and the playground works fully offline.