Tools

CSS Animation Generator

Generate CSS @keyframes animations with a live preview. Customize properties and copy the generated CSS.

Name

Duration (s)

Delay (s)

Timing

Iteration

Direction

Fill Mode

Live Preview

Generated CSS

@keyframes myAnimation {
  0% {
    opacity: 0;
    transform: translateY(0px);
  }
  100% {
    opacity: 1;
    transform: translateY(-20px);
  }
}

.animated {
  animation: myAnimation 1s ease 0s infinite alternate both;
}

marduc812