Правило @keyframes

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

Для записи ключевых кадров используется специальное правило @keyframes. В каждом ключевом кадре необходимо разместить те свойства, которые должны применяться к элементу в заданный момент времени.

Структура правила выглядит следующим образом:

@keyframes animationName {
    from {
        /* Список CSS-свойств */
    }
    to {
        /* Список CSS-свойств */
    }
}

Сначала мы объявляем правило с помощью слова @keyframes, после чего указываем название анимации (имя может быть произвольным, но при этом желательно сделать его информативным). Следом, в фигурных скобках записываем ключевые кадры (минимум два). В нашем примере первый кадр начинается ключевым словом from, а второй — словом to. После этого ставятся фигурные скобки, в которых записываются необходимые CSS-свойства в привычном нам формате. Другими словами, каждый ключевой кадр имеет вид обычного стиля CSS, состоящего из набора свойств.

Представим, что мы хотим создать примитивную двухкадровую анимацию, в которой один цвет фона (красный) меняется на другой (зеленый). Мы запишем правило в таком виде:

@keyframes changeBackgroundColor {
    from {
        background-color: red;
    }
    to {
        background-color: green;
    }
}

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

@keyframes changeBackgroundColor {
    from {
        background-color: red;
    }
    50% {
        background-color: yellow;
    }
    to {
        background-color: green;
    }
}

Запись 50% означает, что фон станет желтым ровно в середине анимации. По такому принципу можно добавлять сколько угодно ключевых кадров — просто используйте необходимое число в процентах (30%, 60%, 75% и так далее). Позже, когда будет задана длительность анимации, станет понятно, сколько времени пройдет до появления желтого цвета. К примеру, если вы установите длительность в размере 6 секунд, то желтый цвет фона появится через 3 секунды после старта анимации.

Разумеется, можно указывать в одном кадре несколько CSS-свойств. Например, чтобы сместить наш элемент вниз на 50 пикселей к середине анимации, и еще на 50 пикселей — к концу анимации, следует записать:

@keyframes changeBackgroundColor {
    from {
        background-color: red;
    }
    50% {
        background-color: yellow;
        transform: translateY(50px);
    }
    to {
        background-color: green;
        transform: translateY(100px);
    }
}

Еще более интересно то, что можно создавать паузы в анимации, записывая один набор свойств для нескольких ключевых кадров сразу. Например, чтобы красный цвет сменился на желтый к 33% от длительности анимации, а переход от желтого к зеленому начался после 66%, запишите следующее:

@keyframes changeBackgroundColor {
    from {
        background-color: red;
    }
    33%, 66% {
        background-color: yellow;
        transform: translateY(50px);
    }
    to {
        background-color: green;
        transform: translateY(100px);
    }
}

Таким образом мы создадим эффект паузы на временном отрезке с 33% до 66%.

Ключевые слова from и to равнозначны процентным записям 0% и 100% соответственно. Вам не обязательно начинать анимацию с 0% и заканчивать на 100%. Ее можно запускать позже и завершать раньше, при этом добиваясь интересных эффектов.

Кроссбраузерность

CSS-анимация поддерживается всеми современными браузерами. В Internet Explorer версии 9 и ранее анимация не работает. Некоторые старые версии браузеров, такие как Safari 4–5, iOS Safari 3.2–5.1 и Android Browser 2.1–3, понимают анимацию только при использовании префикса -webkit-.

Далее в учебнике: свойства для запуска анимации — animation-name и animation-duration.