CSS Animation Generator
Pick a preset such as bounce, fade or shake, edit the keyframes, tune the timing and easing curve, and watch it play live. Then copy the @keyframes and animation CSS.
cubic-bezier(x1, y1, x2, y2)
Drag the orange handles on the curve to make your own easing.
How to make a CSS animation
- Choose a preset to start from. The preview plays it straight away; press Replay to see it again.
- Adjust the duration, delay, repeat count and direction, and pick an easing. Drag the orange handles on the curve for a custom cubic-bezier.
- Edit the keyframes if you like, then copy the CSS and add the class (for example
.bounce) to any element.
How CSS animations work
An animation has two parts. The @keyframes rule lists what the element looks like at points from 0% (start) to 100% (end), for example its position, size, rotation or opacity. The animation property on an element then says which keyframes to play, for how long, with what easing, how many times and in which direction. The browser fills in every frame in between.
For smooth animations, stick to transform and opacity. Browsers can animate those on the graphics card without recalculating the page layout, so they stay at 60 frames per second even on phones. Animating width, height, top or margin is much heavier.
Easing and timing
Easing controls how speed changes during the animation. ease-out starts fast and slows down, which feels natural for things entering the screen; ease-in suits things leaving. Back curves overshoot their target for a playful bounce. A cubic-bezier is defined by two control points: the x values (time) must be between 0 and 1, but the y values can go above 1 or below 0 to create overshoot. steps() jumps between frames instead of gliding, which is used for sprite animations and typewriter effects.
Respect reduced motion
Some people get dizzy or distracted by motion and turn on “reduce motion” in their system settings. The optional prefers-reduced-motion rule switches the animation off for them. It is a good habit for anything larger than a small hover effect.
Need a different tool? Suggest it here — we read every message.
Frequently asked questions
How do I start the animation on hover or click?
Put the animation inside a :hover rule, or add the class with JavaScript when something happens, for example element.classList.add('bounce').
What does fill mode do?
It decides whether the first keyframe applies during the delay (backwards), whether the last keyframe stays after the animation ends (forwards), or both. “both” is usually what you want for entrance animations.
Why does my animation not replay?
A CSS animation runs once when the class is applied. To replay it, remove the class, force a reflow (for example by reading offsetWidth), and add it again.
Do I need vendor prefixes?
No. All current browsers support unprefixed @keyframes and animation.
Is anything sent to a server?
No. Everything is calculated in your browser, and nothing you enter leaves your device.