Toolis.dev

CSS Animation Generator

Visual builder for CSS `@keyframes`. Timeline editor with draggable nodes, per-keyframe transform / opacity / color / radius, plus seven ready-to-go presets.

  • Runs in browser
  • No signup
  • No tracking
Share
Found this useful?Buy me a coffee

How to use CSS Animation Generator

  1. Pick a preset (fadeIn, bounce, etc.) or start from a fresh two-keyframe animation.

  2. Click a node on the timeline to edit it.

  3. Adjust transform, opacity, color, and radius for that node.

  4. Tune duration, delay, timing function, iterations, direction, fill mode.

  5. Copy the `@keyframes` + `animation` CSS.

When to use it

  • Loading spinners and skeletons.

  • Hero-section entrance animations.

  • Button hover effects.

  • Modal enter / exit transitions.

  • Marketing site decorative motion.

What it fixes

  • Counting percentages by hand.

  • Reloading to see each tweak.

  • Memorizing the animation shorthand order.

  • Guessing cubic-bezier values blind.

About CSS Animation Generator

Hand-writing keyframes is tedious — counting percentages, debugging missing commas, and reloading to see the result. This tool gives you a timeline of handles you can click and edit, with a live preview that loops automatically as you tweak.

Each keyframe controls `translate`, `scale`, `rotate`, `skew`, `opacity`, `background-color`, and `border-radius`. The animation shorthand exposes every part of the spec — duration, delay, timing function (including cubic-bezier presets), iteration count, direction, and fill mode. Copy the full CSS and drop it into any stylesheet.

References: MDN — @keyframes · MDN — animation shorthand

Frequently asked

  • What does the output look like?

    A `@keyframes` block plus the `animation` shorthand applied to a `.box` selector. Drop both into your stylesheet and add the class to any element.

  • How do I add a keyframe?

    Click `+ Keyframe` in the timeline panel. A new handle drops into the largest empty gap. Click any handle to select it and edit its properties.

  • Why does my animation flash at the end?

    Default `fill-mode` is `none`, which snaps back to the starting style after the animation ends. Set `forwards` to keep the final keyframe applied or `both` to also apply the initial frame before the delay.

  • How do I make it loop forever?

    Type `infinite` into the Iterations field. Any positive integer works too — `3` plays the animation three times.

  • Can I animate colors?

    Yes — each keyframe has its own background color. The browser interpolates between adjacent keyframes in RGB by default.

  • Why use cubic-bezier?

    Built-in easings (`ease`, `ease-in-out`) cover the basics. Custom cubic-bezier curves let you dial in overshoot, anticipation, or unusual pacing. Two presets are included.

Discussion

All tools