Softonic

CSS Animation Generator

Step 1 / 2
Preset
Next

Writing @keyframes from scratch is tedious: you pick percentages, guess properties, hit reload, watch, adjust. This generator gives you six ready-made animations (fade, slide up, bounce, spin, pulse and shake) and lets you set the animation name, duration, easing, iteration count and direction. The result plays back in real time, and when you are happy you can copy the generated @keyframes block and the shorthand animation property.

How to build a CSS animation

  1. 1

    Choose a preset

    Pick one of the six built-in animations: fade, slide up, bounce, spin, pulse or shake.

  2. 2

    Name the animation

    Give the keyframes a valid CSS identifier, such as `cardIn` or `fadeIn`. The same name is used in the `animation` shorthand.

  3. 3

    Set timing and repetition

    Duration in seconds, easing (ease, ease-in, ease-out, ease-in-out, linear or spring), number of iterations (1, 2, 3 or infinite) and direction (normal, reverse, alternate or alternate-reverse).

  4. 4

    Copy the CSS

    The generated `@keyframes` rule and the `animation:` shorthand, ready to paste into your stylesheet.

Animation anatomy

@keyframes slide-in {
  0%   { transform: translateX(-100%); opacity: 0; }
  60%  { transform: translateX(10%);   opacity: 1; }
  100% { transform: translateX(0);     opacity: 1; }
}

.card {
  animation: slide-in 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

Eight properties in the shorthand: animation-name duration timing-function delay iteration-count direction fill-mode play-state.

Easing choices

The generator offers six easing functions:

Easing cubic-bezier() Feel
linear n/a Constant speed
ease-in 0.42, 0, 1, 1 Slow start, fast end
ease-out 0, 0, 0.58, 1 Fast start, slow end
ease-in-out 0.42, 0, 0.58, 1 Slow-fast-slow
ease (default) 0.25, 0.1, 0.25, 1 Gentle default
spring 0.68, -0.55, 0.27, 1.55 Pops past and settles

Animate the right properties

The browser can animate any property, but only a few animate smoothly on the GPU without triggering layout or paint:

Cheap (composite-only): transform, opacity, filter.

Expensive (layout/paint): width, height, top, left, margin, padding, background-color.

Sixty-frames-per-second animations over width and top are possible on small elements but will tank on mobile if you animate many at once. For complex motion, always prefer transform: translate(...) over top / left, and transform: scale(...) over animated width/height.

will-change: use sparingly

Telling the browser to pre-allocate a composite layer can help smoothness:

.card { will-change: transform; }

But it consumes memory. Apply it just before the animation triggers, and remove it when done. Permanently setting will-change: transform on many elements can hurt more than it helps.

Reduced motion

Some users have motion sensitivity and set OS preferences:

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

Respect this setting. Provide an instant state change or a very subtle fade as a fallback.

Frequently Asked Questions

CSS for simple, declarative, one-off motion. Web Animations API (element.animate()) for JavaScript-driven timing, dynamic keyframes, pausing and playback control. Both run on the compositor; neither is inherently faster.

Almost always because you are animating a layout-triggering property (width, top, margin) instead of transform. Switch to translate() and scale() and the jank usually disappears.

Yes, animation: a 1s, b 1s 1s, c 1s 2s; runs three animations sequentially via staggered delays. This generator outputs a single animation, so add the extra entries to the shorthand yourself. For more complex choreography, use the Web Animations API or a library like GSAP.

It makes the element take the from state before the animation starts (during delay) and hold the to state after the animation ends. Without both, the element snaps back to its pre-animation styling when the animation finishes. The generator keeps the shorthand minimal, so append the fill mode yourself if you need it.

Related Tools

ASCII Table Reference

Full ASCII table from 0 to 127 with decimal, hex, octal, binary, standard names and HTML numeric-reference notation, including NUL, LF and DEL.

HEX Color Picker

Pick or enter a HEX colour and get RGB, HSL, approximate CMYK, relative luminance and contrast ratios against white and black.

Color Palette Generator

Generate monochromatic, analogous, complementary, triadic or tetradic color palettes from a base HEX color and export copy-ready CSS variables.

HTML Character Reference

Searchable list of HTML entities, their named and numeric codes, and a one-click copy for special characters and symbols.

FPS Counter

Measure browser FPS with requestAnimationFrame, smoothing, min/max frame rate, warnings and an optional graph. Runs locally with no upload or API.

JSON Formatter

Paste JSON to pretty-print with 2 or 4 spaces, minify it to compact output, or run a quick syntax check before copying the result.