Skip to main content
T

CSS Keyframes Animation Generator

NEW

Pick a preset animation, tune the timing, watch it run live, and copy both the @keyframes block and the animation shorthand.

Animation

Preview

PLAY

CSS

Send output to:
Advertisement

How to use Keyframes Animation Generator

  1. Click a preset animation such as fade-in, bounce or spin.
  2. Set duration, timing-function, delay, iteration count, direction and fill-mode.
  3. Watch the preview run and press Replay to re-trigger it.
  4. Click Copy CSS to grab the @keyframes block and animation shorthand.

What is Keyframes Animation Generator?

The Keyframes Animation Generator creates ready-to-use CSS @keyframes animations. Choose a preset — fade-in, slide-in, bounce, pulse, shake, spin, flip or zoom-in — and each one ships its own keyframes block.

Tune the duration, timing-function (including a few cubic-bezier presets for overshoot), delay, iteration count, direction and fill-mode. The preview element runs your animation immediately and auto-replays on every change; a Replay button re-triggers it on demand using a forced reflow.

The tool runs entirely in your browser and outputs both the full @keyframes definition and the matching animation shorthand, so you can paste a complete, working animation straight into your stylesheet.

Advertisement

FAQ

What is the difference between @keyframes and the animation property?
@keyframes defines what changes during the animation (the from/to or percentage steps), while the animation shorthand tells an element which keyframes to use plus its duration, easing, delay, count and direction. You need both for a working animation.
How do I make the animation play only once or loop forever?
Set the iteration count to a number like 1 for a single run, or tick 'infinite' to loop forever. This maps to the animation-iteration-count value in the generated shorthand.

Related tools

People also use

← Back to Developer Tools · All tags

Last updated:

Advertisement