Компонування Декількох Анімацій

Можна використовувати скорочену форму для вказання всіх властивостей анімації. Синтаксис наступний:

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

Перепишемо наступні властивості у скороченому вигляді.

Повний запис

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;

Скорочений запис

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

Цей запис виглядає досить заплутано, і легко пропустити якусь властивість. Проте така можливість існує.

Примітка

Для браузера немає різниці між скороченим і повним способом вказання анімації.