LocalToolsOffline browser tools collection

Category: Developer tools

CSS Keyframes Generator

System ideaMissing a tool?

Pick an animation preset and copy the @keyframes block

Pick a fade, slide, bounce, pulse or spin preset, set the duration, timing function, iteration count and direction, and copy the full @keyframes block plus the animation shorthand that uses it, with a live preview.

Output
@keyframes localtools-preview {
  from {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-24px);
  }

  60% {
    transform: translateY(0);
  }

  80% {
    transform: translateY(-12px);
  }

  to {
    transform: translateY(0);
  }
}

.element {
  animation: localtools-preview 1.2s ease-in-out infinite normal;
}

The preview restarts whenever you change the preset, using the exact CSS shown below.

Everything on this page is processed in your browser. Nothing is uploaded.

What this tool does

Hand-writing an @keyframes block means naming percentage stops and getting the property values at each one to interpolate the way you expect, which is easy to get subtly wrong for something like a bounce with several stops. This tool ships a handful of common animation shapes as ready-made stop lists, and lets you tune the timing controls that don't change the keyframes themselves, so the preview always matches the CSS block underneath it exactly.

How to use it

  1. Pick an animation preset.
  2. Set the duration, timing function, iteration count and direction.
  3. Copy the @keyframes block and the animation shorthand below it.

Privacy

This tool runs entirely in your browser. Your input is never uploaded, stored or shared — closing the tab removes it.

Frequently asked questions

Why does the preview restart when I change the preset?
Switching presets swaps the underlying @keyframes stops, so the preview element is remounted to guarantee the running animation matches the one just generated rather than finishing out a stale one.
What does iteration count "infinite" do?
It repeats the animation forever, which is what the preview uses by default; set a number instead if you want it to play a fixed number of times and then stop.
Is anything sent to a server?
No. The @keyframes block and animation shorthand are built in the page from your preset and timing choices, which is why the preview updates instantly.

Back to all tools