Zum Inhalt springen
Anim

CSS Animation Generator

Create keyframes in a GUI.

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;
}

Über CSS Animation Generator

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

So funktioniert's

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

FAQ

Free?

Yes.

Uploaded?

No.