Wenn die Animationsdauer und der Animationsname definiert sind, wird die Animation automatisch abgespielt.

Die Animation wird am ersten Schlüsselbild angehalten.

Das ist ein Unterschied zu animation-duration oder animation-name, die gar nicht vorhanden sind. Wenn die Animation angehalten wird, wird der Stil des ersten Keyframes angewendet und nicht der Standardstil.

In diesem Beispiel ist das Quadrat standardmäßig sichtbar, aber beim ersten Schlüsselbild von fadeAndMove wird die opacity auf 0 gesetzt. Wenn die Animation angehalten wird, bleibt sie an diesem ersten Schlüsselbild „hängen“ und ist somit unsichtbar.

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