Nous pouvons utiliser la forme abrégée pour spécifier toutes les propriétés d'animation. La syntaxe est la suivante :

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

Réécrivons brièvement les propriétés suivantes.

Long chemin

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;

Abrégé

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

Cela semble si déroutant, et nous pouvons facilement manquer une valeur. Cependant, nous avons une telle opportunité.

Remarque

Pour le navigateur, il n'y a aucune différence entre la forme abrégée et la manière longue de spécifier l'animation.