Which animation-fill-mode should I choose?

`forwards` holds the final frame, which is what an element that fades in and stays needs. `backwards` applies the first frame during the delay. `both` does each, and is the usual choice for entrance animations. With `none` the element snaps back to its untouched styles before and after.

How do I respect reduced-motion preferences?

Wrap the animation in `@media (prefers-reduced-motion: reduce)` and set `animation: none` there, so people sensitive to motion never see it play. It is a baseline accessibility requirement and worth adding to every animation you ship.

CSS / FRONTEND · RUNS IN YOUR BROWSER

CSS Animation Generator

Choose an effect, tune the timing, and get complete keyframes plus the animation properties.

Nine ready-written keyframe sets. The output includes the full @keyframes block, so no library is needed.

Preview

Preview backdrop

LightDarkTransparent

Tooloo

Generated CSS

@keyframes tooloo-slide-in-up {
  0% { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}

.animated-element {
  animation-name: tooloo-slide-in-up;
  animation-duration: 0.8s;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
  animation-direction: normal;
  animation-fill-mode: both;
}

Remember to set animation to none inside @media (prefers-reduced-motion: reduce).

Effect

Timing

Duration

Delay

Repeat forever

Iterations

Timing function

Direction

Fill mode

About this tool

Pick from nine common effects — fade, slide, zoom, pulse, bounce, shake, spin, and more — then adjust duration, delay, iteration count, timing function, direction, and fill mode while the preview replays immediately. The output contains both the `@keyframes` block and the matching animation properties, so pasting it into a stylesheet is all that is required; no animation library is involved.

How it works

Choose an animation effect.
Set duration, delay, and iteration count, and pick a timing function.
Copy the complete CSS including the @keyframes block.

Privacy

Every calculation and preview runs inside this browser. Your input is never uploaded, stored, or written to the URL or any log.

Frequently asked questions

Which animation-fill-mode should I choose?: `forwards` holds the final frame, which is what an element that fades in and stays needs. `backwards` applies the first frame during the delay. `both` does each, and is the usual choice for entrance animations. With `none` the element snaps back to its untouched styles before and after.
How do I respect reduced-motion preferences?: Wrap the animation in `@media (prefers-reduced-motion: reduce)` and set `animation: none` there, so people sensitive to motion never see it play. It is a baseline accessibility requirement and worth adding to every animation you ship.

← All CSS / Frontend tools