Skip to content
Anim

CSS Animation Generator

Create @keyframes and animation CSS from GUI controls.

Keyframes

@keyframes fadeSlide {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(12px);
    opacity: 0.4;
  }
}

.animated {
  animation-name: fadeSlide;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: both;
}

About CSS Animation Generator

Set name, duration, timing, iteration, and stops to get animation CSS. Everything runs in your browser.

How to use

  1. Tune keyframes
  2. Check the preview
  3. Copy the CSS

FAQ

Free?

Yes.

Uploaded?

No.