CSS правило @keyframescss3

CSS правила

Определение и применение

CSS правило @keyframescss3 позволяет контролировать промежуточные этапы анимации путем создания ключевых кадров в процессе анимации. Это дает возможность точнее контролировать процесс анимации вручную, задавая для нее промежуточные шаги.

Чтобы использовать ключевые кадры, создается правило @keyframescss3 с произвольным именем, которое впоследствии используется в свойстве animation-namecss3, либо в универсальном свойстве animationcss3 для добавления списка ключевых кадров в анимацию.


Каждое правило @keyframes должно содержать список стилей для селекторов ключевых кадров, каждый из которых задаёт процент для анимации, при котором происходит ключевой кадр. Указать, когда происходит смена стиля необходимо в процентах (0% - это начало анимации, 100% - это когда анимация завершена), или с помощью ключевых слов "from" и "to", которые соответствуют, как 0% и 100%. Для корректного проигрывания анимации, ключевые кадры должны содержать начало цикла и его конец (значения 0% | from и 100% | to).


Допускается перечислять ключевые кадры в любом порядке, так как браузер их обрабатывает не в порядке размещения, а в зависимости от значения процента (от меньшего значения к большему). Если анимация имеет те же начальные и конечные свойства, то вы можете перечислить их через запятую: 0%, 100% {}.

Если по какой-то причине вы решили включить в правило свойства, которые не могут быть анимированы, то они будут проигнорированы браузером, а свойства, которые могут быть анимированы будут включены в анимацию.

Свойства, указанные в ключевом кадре со значением !important игнорируются. Ознакомиться, как происходит отмена значимости стилей (!important) вы можете в статье "Каскадность в CSS" (раздел "Нюансы конфликтов").

Поддержка браузерами

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
@keyframescss343.0
4.0
-webkit-
16.0
5.0
-moz-
30.0
15.0
-webkit-
9.0
4.0
-webkit-
10.012.0

CSS синтаксис:

@keyframes animationName {
	from | %  {css-styles} // начало цикла
	to | %  {css-styles} // конец цикла
}
	
	animationName - имя анимации
	from | to | %  - селектор ключевого кадра
	css-styles - css стили

Значения свойства

ЗначениеОписание
animationName
(имя анимации)
Задаёт имя анимации. Обязательный параметр.
Используется в свойстве animation-namecss3, либо в универсальном свойстве animationcss3. Имя анимации может состоять из латинских букв без учета регистра от A до Z, цифр от 0 до 9, знака подчеркивания (_), и/или тире (-). Первый символ должен быть буквой (то есть не должен начинаться с числа, даже если перед ним ставится тире). Два тире подряд запрещены в начале имени. Кроме того, не могут использоваться специальные зарезервированные слова, такие как none, unset, initial, или inherit в любом сочетании.
keyframes-selector
(селектор ключевого кадра)
Процент от продолжительности анимации. Обязательный параметр.
Допустимые значения:
0%-100%
from (тоже самое, что 0%)
to (тоже самое, что 100%)
Допускается использовать множество селекторов ключевого кадра, при этом перечислять ключевые кадры возможно в любом порядке, так как браузер их обрабатывает не в порядке размещения, а в зависимости от значения процента (от меньшего значения к большему).
css-styles
(css стили)
Одно или несколько допустимых (анимируемых) свойств стиля CSS. Обязательный параметр.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Пример использования CSS правила @keyframes</title>
<style> 
.test {
width: 75px; /* устанавливаем ширину блока */
height: 75px;  /* устанавливаем высоту блока */
border-radius: 50px;  /* определяем форму углов элемента */
position: relative;  /* элемент с относительным позиционированием (position:static - по умолчанию и, как следствие, значение свойства left не повлияли бы на позиционирование элемента) */
-webkit-animation: iliketomoveit 5s infinite;  /*  для поддержки ранних версий браузеров */
animation: iliketomoveit 5s infinite;  /* задаём имя анимации (соответствует имени назначенному в ключевых кадрах), продолжительность анимации и указываем, что анимация будет повторяться бесконечно  */
} 
@-webkit-keyframes iliketomoveit { /* для поддержки ранних версий браузеров */ 
	0%   {left: 0px;} /* задаем начало анимации */ 
	25%  {left: 400px; background: red;} /* сдвигаем элемент на 400px от левого края при этом устанавливаем цвет заднего фона */ 
	75%  {left: 200px;}  /* уменьшаем сдвиг от левого края */ 
	100% {left: 0px; background: green;} /* возвращаем элемент на первоначальную точку и изменяем цвет заднего фона */ 
	} 
@keyframes iliketomoveit {
	0%   {left: 0px;} 
	25%  {left: 400px; background: red;} 
	75%  {left: 200px;} 
	100% {left: 0px; background: green;} 
	} 
</style>
</head>
<body>
<div class = "test"></div>
</body>
</html>
Пример использования CSS правила @keyframes (ключевые кадры для анимации в CSS).
Пример использования CSS правила @keyframes (ключевые кадры для анимации в CSS).
CSS правила