@keyframes
Как настоящие художники-постановщики, создаём раскадровку для анимации.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Обновлено 30 ноября 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
Директива @keyframes используется для создания ключевых кадров CSS-анимаций.
Пример
Скопировать ссылку «Пример» Скопировано
@keyframes circle-to-square from border-radius: 50%; background-color: red; > to border-radius: 0; background-color: blue; >>@keyframes circle-to-square from border-radius: 50%; background-color: red; > to border-radius: 0; background-color: blue; > >
Как понять
Скопировать ссылку «Как понять» Скопировано
Что из себя представляет любая анимация? Это переход от одного состояния элемента к другому состоянию.
Чтобы рассказать браузеру, с чего начать и чем закончить анимацию, используется директива @keyframes .
Как пишется
Скопировать ссылку «Как пишется» Скопировано
После ключевого слова @keyframes мы должны написать имя анимации. Оно понадобится нам, чтобы связать анимацию для конкретного элемента с ключевыми кадрами. Желательно, чтобы имя анимации было уникальным.
Если в коде встречается несколько директив с одинаковыми именами, то будет воспроизводиться последняя, стоящая ниже по коду анимация.
Ключевые кадры могут прописываться при помощи ключевых слов from (начальный кадр) и to (конечный кадр). Это удобно, если у вас всего два ключевых кадра. Если же кадров больше двух, то можно использовать проценты.
@keyframes circle-to-square from border-radius: 50%; background-color: red; > 50% border-radius: 25%; background-color: green; > to border-radius: 0; background-color: blue; >>@keyframes circle-to-square from border-radius: 50%; background-color: red; > 50% border-radius: 25%; background-color: green; > to border-radius: 0; background-color: blue; > >
Браузер расшифровывает ключевое слово from как 0 % , а ключевое слово to как 100 % .
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Задавайте уникальное имя каждой анимации.
�� from равно 0 % , to равно 100 % .
�� Если нужна простая анимация от исходного значения к конечному, то внутри директивы можно указать только финальный кадр.
@keyframes circle-to-square to border-radius: 0; background-color: blue; >>@keyframes circle-to-square to border-radius: 0; background-color: blue; > >
Подробнее об анимациях можно прочитать в статье «CSS-анимации».
CSS свойство @keyframes
Правило @keyframes устанавливает ключевые кадры при анимации элемента.
Ключевой кадр это свойства элемента (прозрачность, цвет, положение и др.), которые должны применяться к нему в заданный момент времени. Таким образом, анимация представляет собой плавный переход стилевых свойств от одного ключевого кадра к другому. Вычисление промежуточных значений между такими кадрами берёт на себя браузер.
Самый простой вариант, когда есть только два ключевых кадра — исходное и конечное состояние. Например:
@keyframes box < from < left: 0; >to < left: 300px; >>
Здесь набор ключевых кадров имеет имя box, которое в последствии будет использовано в свойстве animation. В наборе определяется, что элемент будет изменять значение свойства left от 0 до 300 пикселей. Вместо ключевых слов from и to можно использовать, соответственно, 0% и 100%.
Ключевые кадры не обязательно должны начинаться с 0% и заканчиваться 100%. В этом случае анимация будет происходить не сразу.
CSS синтаксис
@keyframes переменная селектор-ключевого-кадра css-стили;>>
Возможные значения
Обязательный параметр. Определяет процент от продолжительности анимации.
0-100%
from (то же, что и 0%)
to (то же, что и 100%)
Вы можете указывать множество селекторов ключевого кадра в одной анимации.
Пример использования
Заставим элемент понемногу сдвигаться вниз на 200px
/* Safari 4.0 - 8.0 */ @-webkit-keyframes mymove < from to > /* Стандартный синтаксис */ @keyframes mymove < from to >
Правило @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.
@keyframes¶
Правило @keyframes управляет промежуточными шагами в последовательности анимации CSS, определяя стили для ключевых кадров последовательности анимации.
Это дает больший контроль над промежуточными этапами анимационной последовательности, чем переходы.
Переходы и Анимации
- animation
- animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- animation-play-state
- animation-timing-function
- transition
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
Синтаксис¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
@keyframes slidein from margin-left: 100%; width: 300%; > 50% margin-left: 50%; width: 200%; > to margin-left: 0%; width: 100%; > > Значения¶
JavaScript может получить доступ к @keyframes правилам с помощью интерфейса объектной модели CSS CSSKeyframesRule .
Чтобы использовать ключевые кадры, создайте правило @keyframes с именем, которое затем используется свойством animation-name . Каждое правило @keyframes содержит список стилей селекторов ключевых кадров, которые определяют проценты вдоль анимации, когда происходит ключевой кадр, и блок, содержащий стили для этого ключевого кадра.
Вы можете перечислить проценты ключевого кадра в любом порядке; они будут обрабатываться в том порядке, в котором они должны произойти.
Действительные списки ключевых кадров¶
Если правило @keyframes не определяет начальные или конечные состояния анимации (то есть 0%/from и 100%/to , браузеры будут использовать существующие стили этого элемента для состояний начала и конца. Это можно использовать для анимации элемента из его начального состояния и обратно.
Свойства, которые не могут быть анимированы в правилах @keyframes , игнорируются, но поддерживаемые свойства все равно будут анимированы.
Обработка дубликатов¶
Если для данного имени существует несколько наборов ключевых кадров, используется последний, который встречается парсером. Правила @keyframes не каскадируются, поэтому анимации никогда не выводят ключевые кадры из нескольких наборов правил.
Если смещение времени анимации дублируется, используется последний ключевой кадр в правиле @keyframes для этого процента. Внутри правила @keyframes нет каскадирования, если несколько ключевых кадров определяют одинаковые процентные значения.
Когда свойства не заданы в некоторых ключевых кадрах¶
Свойства, которые не указаны в каждом ключевом кадре, по возможности интерполируются — свойства, которые невозможно интерполировать, удаляются из анимации. Например:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
@keyframes identifier 0% top: 0; left: 0; > 30% top: 50px; > 68%, 72% left: 50px; > 100% top: 100px; left: 100%; > > Здесь свойство top анимирует, используя 0% , 30% и 100% ключевые кадры, а анимации для left используют 0% , 68% и 100% ключевые кадры.
Когда ключевой кадр определяется несколько раз¶
Если ключевой кадр определен несколько раз, но не все затронутые свойства находятся в каждом ключевом кадре, учитываются только значения, указанные в последнем ключевом кадре. Например:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
@keyframes identifier 0% top: 0; > 50% top: 30px; left: 20px; > 50% top: 10px; > 100% top: 0; > > В этом примере на 50% ключевом кадре используется значение top: 10px , а все остальные значения в этом ключевом кадре игнорируются.
Каскадные ключевые кадры поддерживаются начиная с Firefox 14. В приведенном выше примере это означает, что в 50% ключевом кадре будет добавлено значение left: 20px . Это еще не определено в спецификации, но это обсуждается.
!important в ключевых кадрах¶
Объявления в ключевых кадрах с модификатором !important игнорируются:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
@keyframes important1 from margin-top: 50px; > 50% margin-top: 150px !important; > /* ignored */ to margin-top: 100px; > > @keyframes important2 from margin-top: 50px; margin-bottom: 100px; > to margin-top: 150px !important; /* ignored */ margin-bottom: 50px; > > Спецификации¶
Поддержка браузерами¶
Can I Use css-animation? Data on support for the css-animation feature across the major browsers from caniuse.com.