#animation-name

Legt fest, welche Animations-Keyframes verwendet werden sollen.

default animation-name: none;

Wenn kein Animationsname angegeben ist, wird keine Animation abgespielt.

animation-name: fadeIn;

Wenn ein Name angegeben wird, werden die Keyframes verwendet, die diesem Namen entsprechen.

Die FadeIn-Animation sieht zum Beispiel so aus:

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

animation-name: moveRight;

Ein weiteres Beispiel: die moveRight-Animation:

@keyframes moveRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

Letzte Artikel von Redaktion (Alle anzeigen)

animation-name