CSS Animation Generator

Build CSS @keyframes animations visually. Add keyframe stops, set transform/opacity/color, preview live, and copy CSS.

Preview

Animation Properties

Name

Duration: 1s

Timing

Delay: 0s

Iterations

Direction

Fill Mode

Keyframe Stops

at%

transform

opacity

background-color

at%

transform

opacity

background-color

at%

transform

opacity

background-color

CSS Code

@keyframes myAnimation {
  0% {
    transform: translateX(0);
    background-color: #3b82f6;
  }
  50% {
    transform: translateX(100px);
    opacity: 0.5;
    background-color: #8b5cf6;
  }
  100% {
    transform: translateX(0);
    background-color: #3b82f6;
  }
}

.animated-element {
  animation: myAnimation 1s ease 0s infinite normal none;
}

Was this page helpful?

CSS Animation Generator

Related tools