CSS свойство animation-namecss3

CSS свойства

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

CSS свойство animation-name указывает имя анимации/список анимаций, которые должны быть применены к выбранному элементу. Каждое имя указывает на правило (@keyframescss3), которое определяет значения свойств анимации.

Обращаю Ваше внимание на то, что, как правило, удобнее использовать сокращенное обозначение свойства анимации - animationcss3, чтобы установить все свойства анимации в одном объявлении.

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

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

CSS синтаксис:

animation-name:"keyframename /-s | none | initial | inherit";

JavaScript синтаксис:

object.style.animationName = "iliketomoveit"

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

ЗначениеОписание
keyframename /-sУказывает имя анимации / список анимаций, которые должны быть применены к выбранному элементу. Каждое имя указывает на правило (@keyframescss3), которое определяет значения свойств анимации.
Имя анимации может состоять из латинских букв без учета регистра от A до Z, цифр от 0 до 9, знака подчеркивания (_), и/или тире (-). Первый символ должен быть буквой (то есть не должен начинаться с числа, даже если перед ним ставится тире). Кроме того, два тире запрещены в начале имени. Не могут использоваться специальные зарезервированные слова, такие как none, unset, initial или inherit в любом сочетании.
noneУказывает, что ключевые кадры (@keyframescss3) отсутствуют. Используется для отключения анимации. Это значение по умолчанию.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

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

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