Saltar al contenido
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;
}

Acerca de CSS Animation Generator

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

Cómo usarla

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

Preguntas frecuentes

Free?

Yes.

Uploaded?

No.