Tools/CSS Animation Generator

CSS Animation Generator

Build CSS keyframe animations visually. Adjust timing, add keyframe stops, preview live, copy the CSS.

Presets

Animation Properties

Name

Duration600ms

Delay0ms

Timing Function

Iteration Count

Direction

Fill Mode

Live Preview

✦

animation: 600ms ease-out 0ms 1 normal both fadeIn

CSS Output

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.animated-element {
animation-name: fadeIn;
animation-duration: 600ms;
animation-timing-function: ease-out;
animation-delay: 0ms;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: both;
}

Keyframes

2 stops

Common Properties

opacity: 0 → 1

transform: scale() translateX/Y() rotate()

filter: blur(4px) brightness(1.2)

box-shadow: 0 0 20px rgba(…)

background-color: #hex or rgba(…)