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.

Méthode longue

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;

Méthode abrégée

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

Cela semble complexe, et il est facile d'oublier une valeur. Cependant, cette possibilité existe.

Remarque

Pour le navigateur, il n'y a aucune différence entre la forme abrégée et la méthode longue pour spécifier l'animation.