Zum Inhalt springen

animation-name

  • Redaktion 
  • Zuletzt aktualisiert am

#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);
  }
}
46946778f3980a7056863354400f8688?s=250&d=mm&r=g animation-name
Letzte Artikel von Redaktion (Alle anzeigen)

    Nach oben