CSS Animation Builder

Build CSS keyframe animations visually. Add keyframes, set properties, preview live, and copy the CSS code.

Live Preview

Animation Settings

Duration1s

Delay0s

Timing Function

Iteration Count

Direction

Fill Mode

Keyframes

2/8

0%opacity: 0

100%scale(1.1)

Editing 0% keyframe

Percent0%

Translate X

Translate Y

Scale

Rotate

Opacity

Background

#818CF8

CSS Output

@keyframes anim {
  0% {
    opacity: 0;
    background-color: #818cf8;
  }
  100% {
    transform: scale(1.1);
    background-color: #818cf8;
  }
}

.element {
  animation: anim 1s ease infinite;
}

Presets