Preview and customise CSS keyframe animations live, then copy the ready-to-use CSS code.
Cargando la herramienta…
Acerca de esta herramienta
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.
Cómo usar
1Select an animation preset from the grid (bounce, fade, slide, etc.).
2Adjust duration, delay, timing function, iteration count, and fill mode.
3Watch the preview box animate live as you change settings.
4Click the preview box to replay the animation at any time.
5Copy the CSS code from the output panel and paste it into your project.
Preguntas frecuentes
Eight presets are available: bounce (vertical spring effect), fade (opacity in/out), slide (horizontal entrance), rotate (full 360° spin), shake (horizontal jitter), pulse (scale breathe), flip (3D card flip on Y axis), and swing (pendulum rotation).
Fill mode controls the element's style before and after the animation runs. 'forwards' keeps the final keyframe state after the animation ends. 'backwards' applies the first keyframe during the delay. 'both' combines both behaviours. 'none' reverts to the original style.
Yes. Select 'cubic-bezier' from the timing function dropdown and enter the four control point values (x1, y1, x2, y2). The preview and code update immediately.
Copy the CSS code from the output panel and paste it into your stylesheet. The output includes the @keyframes rule and an .animated-element class with the animation shorthand, ready to apply to any element.
No. The generated code is pure CSS. Once you copy and paste the @keyframes block and class into your stylesheet, the animation runs entirely via CSS with no JavaScript dependency.
{# Alpine.js — self-hosted. (The previous jsdelivr CDN tag had a stale SRI
integrity hash, so the browser refused to run it and window.Alpine was
never defined — silently breaking every FAQ accordion and Alpine tool.) #}