CSS Animation Generator (Keyframes)

Make a CSS animation — fade, slide, zoom, bounce, pulse, shake, spin or flip — with duration, delay, easing and repeats, and a reduced-motion rule built in.

Preview

CSS
@keyframes slide-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.animated {
  animation: slide-up 600ms ease-out 0s 1 normal both;
}

/* People who ask their device for less motion see the end state, not the movement. */
@media (prefers-reduced-motion: reduce) {
  .animated {
    animation: none;
  }
}

Animation

Rises into place while fading in.

ms
ms
px
Letters, digits, - and _; the preset’s name is used otherwise.
How is this calculated?
animation: name duration easing delay iterations direction fill-mode — the order the shorthand is written in. Times under one second are written in milliseconds, whole seconds as s.

Runs in your browser — nothing you enter leaves this device.

About this tool

What it does

CSS Animation Generator writes a @keyframes rule and the animation property that runs it, from a set of animations people use most: fade in, slide up, slide in from the left, zoom in, bounce, pulse, shake, spin and flip. Set how long it takes, how long it waits before starting, its easing (steady, fast then slow, overshoot), how many times it repeats, which way it runs, and what the element looks like before and after (the fill mode). The distance for slides, bounces and shakes is adjustable. The preview runs exactly the CSS shown, with a Play again button. Every result includes a prefers-reduced-motion rule, so people who have asked their device for less movement — often because motion makes them dizzy or sick — see the element in place instead of moving. The page also warns about settings that work against people, such as movement that runs forever.

How to use it
  1. Choose an animation.
  2. Set the duration, delay and easing; the preview replays as you change them.
  3. Choose how many times it repeats, its direction and fill mode.
  4. Rename the keyframes if you like, then Copy CSS and add the class (.animated) to your element.
Limits and your data
  • The keyframes are fixed per preset (with an adjustable distance); for a custom path, edit the copied @keyframes.
  • If your device asks for reduced motion, the preview shows the end state without moving — the same as your visitors who ask.
  • Animate transform and opacity, as these presets do: they stay smooth. Animating width, height or top makes the browser redo the layout every frame.
  • Everything happens in your browser; nothing is sent.

Questions

How do I start the animation when something scrolls into view?

Leave the class off at first and add it from JavaScript with an IntersectionObserver when the element appears. With fill “both”, it waits in its first frame until then.

What does fill mode do?

“Forwards” keeps the last frame after the animation ends; “backwards” shows the first frame during the delay; “both” does both, which is what an entrance usually needs. With “none”, the element snaps back to its normal style.

How do I make a loading spinner?

Choose Spin, set Linear easing and Repeat forever, and put the class on a circle with a coloured top border. Give it role="status" and a text label for screen readers.

Why include a reduced-motion rule?

Some people get dizzy or nauseous from movement on screen and turn on “reduce motion” in their settings. The rule respects that; WCAG 2.3.3 recommends it.