Ir para o conteúdo
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;
}

Sobre CSS Animation Generator

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

Como usar

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

Perguntas frequentes

Free?

Yes.

Uploaded?

No.