What is cubic-bezier and how do I use the editor?

cubic-bezier defines a custom easing curve with four control points. Drag the two handles in the curve editor to shape the acceleration profile. The tool updates the cubic-bezier() values and the live preview simultaneously.

What does 'fill-mode' mean?

fill-mode controls what styles are applied before the animation starts and after it ends. 'forwards' keeps the final keyframe style, 'backwards' applies the initial keyframe during the delay period, and 'both' combines both behaviours.

How do I make an animation repeat infinitely?

Set 'Iteration Count' to 'infinite'. You can also enter any positive number to repeat the animation a specific number of times.

Can I use the generated code with frameworks like React or Vue?

Yes. The output is standard CSS that works in any context. In React you can put it in a .css or .module.css file; in Vue you can place it inside a block.

design Free No signup

CSS Animation Generator

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

Loading tool…

About this tool

Design CSS animations without writing a single line of code. Choose from Fade, Slide, Bounce, Rotate, Scale, Shake, Flip, Pulse, Swing, or Custom animation types, then fine-tune the duration, delay, iteration count, direction, and fill-mode. Pick an easing function — including a drag-to-edit cubic-bezier curve — and see the animated element update in real time. The generated @keyframes block and animation shorthand are ready to copy directly into your stylesheet.

How to use

1 Select an animation type from the dropdown (e.g. Bounce, Fade, Rotate).
2 Adjust timing settings: duration, delay, iteration count, direction, and fill-mode.
3 Choose an easing function or drag the cubic-bezier handles to create a custom curve.
4 Copy the generated CSS from the code panel and paste it into your stylesheet.

Frequently Asked Questions

Related tools

Box Shadow Generator

Build CSS box-shadow values visually with live preview — supports multiple layers.