Сокращенная запись animation

Итак, мы с вами рассмотрели восемь разных свойств для CSS-анимации. Если записать каждое из них в отдельной строке, да еще и не забыть про вендорные префиксы, то в общей сложности получится более 30 строк кода для одной анимации!

К счастью, как и в случае с transition, в CSS есть универсальное свойство animation, в котором можно указать сразу все параметры анимации в одной строке, разделяя их пробелом. Для наглядности ниже представлены варианты длинной и короткой записи всех свойств анимации (для экономии места мы не включали в наш пример префиксы производителей, но в реальной практике их понадобится добавить):

div {
    animation-name: coolAnimation;
    animation-duration: 3s;
    animation-timing-function: ease-in;
    animation-delay: 500ms;
    animation-iteration-count: 6;
    animation-direction: reverse;
    animation-fill-mode: forwards;
    animation-play-state: paused;
}

/* Стиль выше эквивалентен следующему: */

div {
    animation: coolAnimation 3s ease-in 500ms 6 reverse forwards paused;
}

Конечно же, нет необходимости использовать каждое из восьми свойств анимации, ведь обязательными являются только два — animation-name и animation-duration. И если вам нужно добавить третий параметр (к примеру, animation-iteration-count), вы можете сделать следующую запись:

div {
    animation: coolAnimation 3s 6;
}

Если нужно применить к элементу сразу несколько анимаций и задать им разные настройки, то каждую группу значений следует отделять запятой, а в конце поставить точку с запятой:

div {
    animation: firstAnimation 300ms ease-in,
               secondAnimation 1s linear alternate;
}

Далее в учебнике вас ждет большой практический урок по CSS-анимации, где мы потренируемся в трансформации элементов с помощью функций свойства transform, а также будем создавать как обычные CSS-переходы transition, так и более сложные вещи с использованием свойства animation.