CSS Animation Generator

Build CSS keyframe animations visually. Configure timing, add keyframes, preview live, then copy production-ready CSS.

Preview

Animation Properties

Name

Duration (s)

Timing Function

Delay (s)

Iterations

Direction

Fill Mode

Keyframes (2)

0%25%50%75%100%

Percent

Translate X

Translate Y

Scale

Rotate

deg

Opacity0%

Skew X

deg

Skew Y

deg

CSS Output

@keyframes myAnimation {
  0% {
    opacity: 0;
  }
  100% {
    transform: none;
  }
}

.animated-element {
  animation: myAnimation 0.6s ease 0s 1 normal both;
}

Presets

About CSS Animations

CSS animations allow elements to transition between styles over time using @keyframes rules and the animation shorthand property.

@keyframes define the animation steps. Each keyframe specifies CSS properties at a given percentage (0% = start, 100% = end).

Duration controls how long one cycle takes. Delay sets time before the animation starts.

Timing function controls acceleration: ease starts slow, speeds up, then slows; linear is constant speed.

Fill mode determines styles before/after animation: forwards keeps the final state, both applies in both directions.

Direction: alternate reverses every other cycle, creating smooth back-and-forth effects. Use with infinite iteration count for looping animations.

Performance tip: animate transform and opacity for best performance — they run on the GPU compositor and don't trigger layout recalculations.