We kunnen de verkorte notatie gebruiken om alle animatie-eigenschappen op te geven. De syntaxis is als volgt:

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

Laten we de volgende eigenschappen kort herschrijven.

Uitgebreide manier

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;

Verkorte notatie

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

Dit ziet er verwarrend uit, en het is gemakkelijk om een waarde over het hoofd te zien. Toch hebben we deze mogelijkheid.

Opmerking

Voor de browser is er geen verschil tussen de verkorte notatie en de uitgebreide manier van het specificeren van de animatie.