Online CSS Animation Generator

Visual @keyframes editing / live preview / preset animations / one-click code copy

Animation name

duration: 1s

timing-function

iteration-count

direction

fill-mode

delay: 0s

Keyframes

Generated CSS

@keyframes myAnimation {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  50% {
    transform: translateX(100px);
    opacity: 0.5;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.element {
  animation-name: myAnimation;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}

About CSS Animations

CSS animations define keyframes with @keyframes and control playback with the animation property. You can set duration, timing function, iteration count, direction and fill mode. This tool offers visual editing and preset templates to generate animation code quickly. For static transforms, use the Transform Preview.

FAQ

How do I use the CSS animation generator?

Visually edit @keyframes properties (such as transform, opacity), choose the duration, timing function and preset template, preview the animation live, then copy the generated CSS once satisfied.

What preset templates are available?

Several common templates are built in, including bounce, rotate, fade in/out (fadeIn/fadeOut) and slide in/out (slideIn/slideOut). Click one to preview it.

How compatible is the generated CSS animation code?

The generated code uses standard CSS @keyframes and animation properties, compatible with all modern browsers (Chrome, Firefox, Safari, Edge) with no vendor prefixes needed.