Skip to main content
CalcChef

CSS Animation Generator

Build a CSS @keyframes animation from up to five steps of rotate, scale, opacity and translate. Set timing, repeats, direction and fill, then copy the code. How it works

Use the CSS Animation Generator

1000ms
0ms
96px
8px
Preview element
CSS
@keyframes myAnimation {
  0% {
    transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
    opacity: 1;
  }
  100% {
    transform: rotate(360deg) scale(1) translateX(0px) translateY(0px);
    opacity: 1;
  }
}

.element {

  animation: myAnimation 1000ms linear infinite normal none;
}

Keyframes

0%
100%

About the CSS Animation Generator

A CSS keyframe animation has two parts: an @keyframes rule that says how the element looks from 0% to 100%, and an animation line that names it with a duration, timing, delay, repeat count, direction and fill mode. This CSS animation generator writes both from up to five steps of rotate, scale, opacity and translate, plays them in a preview and copies the code as CSS, CSS variables, SCSS or a Tailwind config.

How to use this tool

  1. Press a preset (Bounce, Pulse, Shake, Spin, Fade In, Slide Up or Wiggle), or edit the 0% and 100% steps.
  2. Press Add Step to add 25%, 50% and 75% steps. A new step copies the nearest step; the generator does not work out in-between values.
  3. Set the duration (100 to 5,000 ms), the delay (0 to 3,000 ms), the timing function and the transform origin.
  4. Choose the iteration count (1, 2, 3 or infinite), the direction (normal, reverse, alternate or alternate-reverse) and the fill mode (none, forwards, backwards or both).
  5. Pick the CSS, CSS Variable, Tailwind or SCSS tab, tick the reduced-motion box if the animation should stop for visitors who ask for less motion, and copy the code.

Frequently asked questions

How do I make a CSS animation run only once?
Set Iteration count to 1, and Fill mode to forwards if the element should keep the look of the last step when it ends. The code then reads, for the default spin, animation: myAnimation 1000ms linear 1 normal forwards;. To play back and forth, choose alternate under Direction with a count of 2 or more.
Is there a bounce timing function in CSS?
No. The keywords are linear, ease, ease-in, ease-out and ease-in-out, plus step-start and step-end, and this generator offers the first five. The Bounce preset gets its bounce from the keyframes (it moves up 30 px at 50%), with ease-in-out timing.
Why does the element move diagonally when I rotate and translate?
Each step is written as rotate, then scale, then translateX and translateY. Transform functions apply left to right, so the translate runs along the rotated axes. Rotate 45 degrees and move 100 px and the element goes diagonally.
How do I turn off a CSS animation for prefers-reduced-motion?
Tick Stop the animation when the visitor prefers reduced motion. The CSS, CSS Variable and SCSS code then end with @media (prefers-reduced-motion: reduce) { .element { animation: none; } }, and the Tailwind tab adds a comment with the class motion-reduce:animate-none. The media feature is true when the visitor has turned on the reduce-motion setting of their device; MDN notes that motion such as scaling or panning large objects can trigger discomfort for people with vestibular motion disorders.
Why is the Tailwind output a JavaScript object?
The tab writes a config snippet, not CSS: a keyframes object and an animation object to paste into theme.extend of a Tailwind config file. A transform origin is a comment, because it belongs on the element and not in the config.
What are the limits for a step?
Rotate -3,600 to 3,600 degrees, scale 0 to 5, opacity 0 to 1, and translate X and Y -1,000 to 1,000 px. An empty field or a value outside the range gets a message and leaves the step unchanged.

Spinners, pulses, shakes and entrances

Spin turns a loading icon one full circle per second. Pulse grows a notification badge to 1.2 times its size and back over 800 ms, and Shake jolts a rejected form field 10 px left and right in 400 ms. Fade In and Slide Up are entrance effects: for an element that should appear once and stay, set Iteration count to 1 and Fill mode to forwards.

Each step, from 0% to 100% with up to three steps between, sets rotate, scale, opacity and translate X and Y, and the origin control sets the point the element turns around, its center or a corner.

What the code contains

Keyframes set the look at chosen points; the browser works out the frames between them. Each step is written as

transform: rotate(…) scale(…) translateX(…) translateY(…); opacity: …;

in that order. Transform functions apply from left to right, so the translate runs along the rotated axes: rotate 45° and then translate 100 px moves the element diagonally. The CSS tab writes the animation line as name duration timing delay iteration direction fill and leaves the delay out when it is 0, for example animation: myAnimation 1000ms linear infinite normal none;. The CSS Variable tab always writes a delay, 0ms included. The SCSS line is animation: #{$name} $duration $timing $delay $iteration $direction $fill-mode;, with each value held in a variable.

There are four formats. CSS gives the keyframes and the rule. CSS Variable gives the same keyframes with the timing held in custom properties, so you can retime the animation from one place. SCSS gives variables and a keyframes block. Tailwind is a JavaScript object for theme.extend.keyframes and theme.extend.animation, not CSS. A center origin writes nothing; any other origin is a transform-origin line in CSS, CSS Variable and SCSS, and a comment in Tailwind. Pause affects the preview only. Tick the reduced-motion box and the code ends with @media (prefers-reduced-motion: reduce) setting animation: none;, or in Tailwind a motion-reduce:animate-none comment, for visitors whose system asks for less motion.

Related Tools

View all tools
CSS

CSS Box Shadow Generator

Build a CSS box-shadow with up to 5 layers: offset, blur, spread, color, opacity and inset. Copy CSS, Tailwind, SCSS, CSS-in-JS or a variable.

CSS

CSS Text Shadow Generator

Stack up to 5 text-shadow layers with offset, blur, color and opacity, preview them on light or dark, and copy the CSS, variable or Tailwind class.

CSS

CSS Gradient Generator

Build linear, radial and conic gradients from color stops, ten presets or the colors of an image you upload, then copy CSS, Tailwind, React or SCSS code.

CSS

CSS Border Radius Generator

Set a CSS border-radius for each corner in px or %, with elliptical radii and a live preview. Copy CSS, Tailwind, React Native, SCSS or clip-path code.

CSS

CSS Transform Generator

Set translate, rotate, scale, skew, 3D rotation and perspective and see the CSS transform on a live box. Copy CSS, Tailwind, SCSS or custom properties.

CSS

CSS Filter Generator

Combine blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia and drop-shadow on a preview; copy CSS, Tailwind or an SVG filter.