AZ Tools

CSS Animation Generator

Developer

Pick one of six common animation patterns (fade, slide, bounce, spin, pulse, shake) and tune duration, delay, timing function, iteration count, direction, and fill mode with live sliders. The preview pane runs the animation in a real DOM element so you can verify how it actually looks before copying the @keyframes block plus the matching `.box { animation: … }` shorthand to your project.

—
Preset

Preview

Generated CSS

@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.box {
  animation: fade 1s ease 0s 1 normal none;
}

Generated CSS uses standard properties — no vendor prefixes. All modern browsers support these unprefixed.

How to use

  1. Pick a preset (fade, slide, bounce, etc.).
  2. Adjust duration, delay, easing, iteration, direction, and fill mode.
  3. Watch the preview and copy the generated CSS.

Frequently asked questions

Why does my element snap back at the end?
Default `animation-fill-mode` is `none`, so styles only apply during the animation. Set fill mode to `forwards` to keep the final keyframe state.
What's the difference between iteration `1` and `infinite`?
Iteration count runs the keyframes that many times then stops. `infinite` loops forever — useful for spinners but burns CPU on offscreen elements.
Can I use these keyframes with `prefers-reduced-motion`?
Yes, wrap your `.box` rule in `@media (prefers-reduced-motion: no-preference) { … }` so motion-sensitive users opt out automatically.
Why isn't easing visible on `spin`?
Spin is a constant-rate rotation — easing on a single rotational variable looks roughly linear regardless. Easing is most visible on properties with start/end states, like opacity or translate.

Related tools

JWT Decoder

Decode a JSON Web Token to inspect its header, claims, and expiration.

Developer00

UUID Generator

Generate random version-4 UUIDs in bulk, with copy.

Developer00

Hash Generator (SHA)

Generate SHA-1, SHA-256, SHA-384, and SHA-512 hashes from text.

Developer00

URL Encoder / Decoder

Percent-encode text for URLs, or decode encoded URLs back to text.

Developer00

Base64 Encoder / Decoder

Encode text to Base64 or decode Base64 back to text, instantly.

Developer00

JSON Formatter & Validator

Format, beautify, minify, and validate JSON right in your browser.

Developer00