Skip to main content
Toollyz

Search tools

Search for a command to run...

CSS Animation Generator

Pick from eight common animations (fade-in, slide-up, pop, shake, bounce, pulse, spin, wobble), tune duration, delay, timing function, iteration and direction, watch the preview tile move in real time, then copy the complete `@keyframes` block plus the `animation:` shorthand. 100% offline.

What is the CSS Animation Generator?

CSS Animation Generator is a preset-driven editor for `@keyframes`. Eight presets cover the recipes you actually use day-to-day: fade-in, slide-up (with a custom cubic-bezier for an iOS-style slide), pop (overshoot bezier), shake (5-step horizontal jitter), bounce (loops), pulse (loops with a 1.08× scale), spin (linear 360° loop) and wobble (rotation + translation, 6 stops). Each preset is a complete keyframe sequence — you control overall timing (duration in ms, delay, iteration count or infinite, direction, timing function from a curated list including overshoot and ease-in-out beziers). The preview is a real DOM element with the generated CSS applied via inline styles + a live `<style>` block; clicking Replay re-mounts to restart the animation. The output is a complete `@keyframes name { … }` block plus a ready-to-paste `.animated { animation: … }` rule.

How to use it

  1. Pick one of the eight presets — it loads the keyframe sequence into the editor.
  2. Drag the Duration / Delay sliders or pick a Timing function from the dropdown.
  3. Toggle iteration count and direction (alternate is great for ping-pong loops).
  4. Click Replay to re-run the preview from frame 0.
  5. Click Copy CSS to grab the full `@keyframes` block plus the `animation:` shorthand.

Benefits

  • Eight production-ready presets — none of them placeholders, all field-tested.
  • Curated timing functions including iOS-style cubic-beziers — overshoot, snappy, soft.
  • Live preview re-renders on every parameter tweak, replay button re-mounts the element.
  • Output is the complete `@keyframes name { … }` block + matching `.animated` rule.
  • Supports all CSS animation direction values (normal, reverse, alternate, alternate-reverse).
  • Iteration count picker — 1, 2, 3, 5 or infinite.
  • Persists your config in localStorage so your animation is one tab-open away.
  • Pure CSS output — no JS framework, no animation library.
  • Runs 100% in your browser — no server, no upload.

Frequently asked questions

Which timing function should I pick?

For UI: `ease-out` for entrances (feels snappy at the start, settles), `ease-in` for exits (drifts away). For attention-grabbers like 'pop' use the overshoot bezier `cubic-bezier(.34,1.56,.64,1)` — it goes 10% past the end then settles, feeling more physical. `linear` is rarely correct for UI except for loops like spinners.

Why does the preview look choppy?

Animating `transform` and `opacity` is GPU-accelerated and runs at 60 fps. If your preview stutters it's likely a browser/devtools overhead — try the actual CSS in your own page. Avoid animating `width`, `height`, `top`, `left` (layout properties) for smoothness.

Can I edit individual keyframes?

The on-page UI exposes the preset shape and global timing. For per-keyframe edits, copy the CSS out and adjust by hand — the format is `<pct>% { transform: …; opacity: …; }`.

How do I animate background colour?

The current presets focus on transform + opacity (the GPU-accelerated properties). Add a `background-color` line by hand to any keyframe block — the engine generates a normal `@keyframes` rule, so the CSS is yours to extend.

What's the difference between iteration `1` and `infinite`?

1 means play once and stop in the final state. `infinite` loops forever — pair with `alternate` direction to ping-pong rather than jumping back to frame 0 each loop.

Why is `animation-fill-mode: both` set?

`both` means the element holds the frame-0 state during delay and the frame-100 state after it finishes. Without it, the element snaps back to its un-animated state, which usually looks broken.

Can I trigger the animation on hover instead of mount?

Yes — apply the `animation` CSS inside a `:hover` selector instead of the default class. The keyframes block stays the same.

Does this work in older browsers?

All evergreen browsers (Chrome 43+, Firefox 16+, Safari 9+) handle `@keyframes` natively. No `-webkit-` prefix needed in 2026.

How is this different from animate.css or motion libraries?

animate.css is a CSS library — drop it in and use class names. Motion libraries like Framer Motion are JS-driven. This tool generates raw CSS so you don't have to add any dependency — paste it once, done.

Are my settings saved?

Yes — the active preset, name and all timing values persist in localStorage under `toollyz:css-animation`.

Is anything uploaded?

No. Preview, keyframe building and CSS generation run entirely in your browser.

Related tools

See all image tools