What animations are included?

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).

What does fill mode do?

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.

Can I use a custom cubic-bezier?

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.

How do I use the generated code?

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.

Does this require any JavaScript in my project?

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.

Design Free No signup

CSS Animation Playground

Preview and customise CSS keyframe animations live, then copy the ready-to-use CSS code.

Loading tool…

About this tool

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.

How to use

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.

Frequently Asked Questions

Related tools

CSS Animation Generator

Build CSS @keyframes animations visually with live preview, timing controls, and cubic-bezier easing editor.

CSS Gradient Generator

Visually build CSS linear and radial gradients and copy the ready-to-use CSS property.