Wir können die Kurzform verwenden, um alle Animations-Eigenschaften anzugeben. Die Syntax ist wie folgt:

animation: <name> <duration> <timing_function> <delay> <iteration-count> <direction> <fill-mode> <play-state>

Lassen Sie uns die nächsten Eigenschaften kurz umschreiben.

Lange Variante

animation-name: Rotation;
animation-duration: 5s;
animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
animation-delay: 100ms;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: backwards;
animation-play-state: running;

Kurzform

animation: Rotation 5s cubic-bezier(0.075, 0.82, 0.165, 1) 100ms infinite alternate backwards running;

Es sieht so verwirrend aus, und wir können leicht einen Wert übersehen. Dennoch haben wir diese Möglichkeit.

Hinweis

Für den Browser gibt es keinen Unterschied zwischen der Kurzform und der langen Variante der Animationsspezifikation.