ffee All tools
EN 中文 FR DE

CSS Animation Generator

Create a keyframe animation and copy both the keyframes and the animation rule.

Build a keyframe animation

Shorthand: —
The copied CSS contains the keyframes block and the animation rule, so both can be pasted together.

How to use the CSS Animation Generator

  1. Select one of the six keyframe presets from the list.
  2. Tune the duration, timing function, delay, iteration count and direction.
  3. Press Replay to watch it again, then copy the keyframes and rule.

Features

Advertisement

More tools

Flexbox Generator CSS Grid Generator Button Style Generator CSS Transition Generator CSS Transform Generator CSS Filter Generator Glassmorphism Generator Neumorphism Generator Breakpoint Preview Font Pairing Tool Line Height Calculator Modular Scale Calculator

Frequently Asked Questions

Common questions about the free online css animation generator.

Choose a keyframe preset, set the duration, timing and delay, then copy the animation rule together with its keyframes block.
Yes. An animation rule only references a name, so you must also paste the matching keyframes block into your stylesheet.
It lists the keyframe name, duration, timing function, delay, iteration count, direction and fill mode in one declaration.
The default iteration count is one. Set the iteration control to infinite if you want the animation to loop forever.
Linear keeps a constant speed, while ease starts slowly, speeds up and then slows down again for a more natural feel.
Yes. Add extra declarations inside the same keyframe blocks, such as opacity together with transform, and they animate together.
No. It only restarts the preview so you can watch the animation again with exactly the same settings.
They use transform and opacity where possible, which the browser can animate on the graphics card without redrawing the page.
Yes. It is completely free, needs no account and runs entirely in your browser without any network requests.

Last updated: October 10, 2026