Super Boring Tools

Search tools

Find a tool by name or what it does.

CSS Animation Generator

Build keyframe animations with a live preview and copy the CSS.

Preview
Preset
.animated {
  animation: 1s ease 0s infinite normal both sbt-fade;
}

@keyframes sbt-fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .animated {
    animation: none;
  }
}

How to generate a CSS animation

  1. Pick a preset

    Choose a starting preset such as fade, bounce, spin, or pulse to load ready-made keyframes.

  2. Tune the timing

    Adjust duration, easing, delay, iteration count, and direction while the preview plays live.

  3. Copy the CSS

    Copy the generated keyframes block and animation shorthand and paste it into your stylesheet.

Why use this tool

Live looping preview

A sample element plays your animation in real time so you can feel the timing before you ship it.

Ready-made presets

Start from fade, slide, bounce, spin, pulse, shake, or flip and refine from there instead of a blank page.

Full timing control

Set duration, delay, easing, iteration count, direction, and fill mode, then watch each change apply instantly.

Complete CSS output

You get a named @keyframes block plus the animation shorthand, ready to paste into any stylesheet.

Accessibility note

A prefers-reduced-motion wrapper is included so people who ask for less motion get a calmer experience.

Private by design

Everything runs in your browser. Nothing you configure is uploaded or stored. No upload, no signup.

About this tool

The CSS animation generator turns fiddly keyframe syntax into a set of controls you can see. Instead of guessing at percentages and easing curves, you pick a preset, drag a few sliders, and watch a real element move. When it looks right, you copy the CSS.

Every animation is built from two parts. The first is a named @keyframes block that describes what changes at each stop, from 0 percent to 100 percent. The second is the animation shorthand that binds those keyframes to an element and controls how long it runs, how it eases, how long it waits, how many times it repeats, and which direction it plays. This tool writes both for you and keeps them in sync as you tweak.

Presets cover the moves you reach for most: a soft fade, a slide in, a springy bounce, a steady spin, a gentle pulse, a quick shake, and a flip. Each one is a fair starting point, not a locked template, so you can change the duration or easing and make it your own in seconds.

The output also includes a prefers-reduced-motion block. Some people set their device to reduce motion, and that wrapper lets you honor the request by softening or removing the animation for them. Pair this with the CSS transition generator for hover states, or the cubic bezier editor when you want a custom easing curve.

Frequently asked questions

What does this tool output?
It produces a named @keyframes block and the matching animation shorthand. Copy both into your stylesheet and apply the class to any element you want to animate.
Can I edit the keyframes myself?
Yes. Start from a preset, then change duration, easing, delay, iteration count, direction, and fill mode. The keyframes and preview update as you adjust each control.
How do I make the animation loop forever?
Set the iteration count to infinite. You can also set a fixed number of repeats, choose a direction like alternate, and add a delay before it starts.
What is the reduced motion note for?
Some people ask their device to reduce motion. The included prefers-reduced-motion block lets you soften or turn off the animation for those visitors so your interface stays comfortable.
Does anything get uploaded?
No. The generator runs entirely in your browser. Your settings and the generated CSS never leave your device. No upload, no signup.

Related tools