CSS свойство animation

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

CSS свойство animation css3 позволяет задать все свойства анимации в одном объявлении. Это свойство является короткой записью для следующих свойств:

animation-name ("keyframename /-s | none | initial | inherit")
animation-duration ("time | initial | inherit")
animation-timing-function ("linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int, start | end) | cubic-bezier(n,n,n,n) | initial | inherit")
animation-delay ("time | initial | inherit")
animation-iteration-count ("number | infinite | initial | inherit")
animation-direction ("normal | reverse | alternate | alternate-reverse | initial | inherit")
animation-fill-mode ("none | forwards | backwards | both | initial | inherit")
animation-play-state ("paused | running | initial | inherit")

Обратите внимание на важный момент, порядок свойств в списке соответствует необходимому порядку указания значений в свойстве animation css3 . Имя анимации может быть указано как в начале списка, так и в его конце.

Не забывайте в обязательном порядке указывать значение продолжительности анимации (animation-duration), иначе, анимация не будет проиграна, т.к. значение по умолчанию у этого свойства равно нулю.

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

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

Свойство	Chrome	Firefox	Opera	Safari	IExplorer	Edge
animation	43.0 4.0 -webkit-	16.0 5.0 -moz-	30.0 15.0 -webkit-	9.0 4.0 -webkit-	10.0	12.0

CSS синтаксис:

animation:"name duration timing-function delay iteration-count direction fill-mode play-state"; /* имя анимации может быть указано в конце списка */

JavaScript синтаксис:

object.style.animation = "myAnimation 1s linear"

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

Значение	Описание
animation-name	Указывает имя анимации/список анимаций, которые должны быть применены к выбранному элементу. Каждое имя указывает на правило (@keyframes), которое определяет значения свойств анимации. Значение по умолчанию none.
animation-duration	Определяет, сколько секунд или миллисекунд затрачивается на выполнение одного цикла анимации. Значение по умолчанию 0.
animation-timing-function	Определяет кривую скорости для анимации (используется математическая функция - кубическая кривая Безье). Кривая скорости определяет время анимации, используемое, чтобы изменить один набор стилей CSS на другой. Значение по умолчанию ease.
animation-delay	Определяет задержку для запуска анимации. Значение по умолчанию 0.
animation-iteration-count	Указывает, сколько раз анимация должна быть воспроизведена. Значение по умолчанию 1.
animation-direction	Определяет будет ли анимация воспроизводиться в обратном направлении, или в виде чередующихся циклов. Значение по умолчанию normal.
animation-fill-mode	Задает стиль для элемента, когда анимация не воспроизводится (когда она будет закончена, или когда она имеет задержку, установленную свойством animation-delay ). Значение по умолчанию none.
animation-play-state	Определяет состояние анимации (анимация воспроизводится, либо приостановлена). Значение по умолчанию running.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

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

<!DOCTYPE html>
<html>
<head>
	<title>Пример анимации на CSS</title>
<style> 
.test {
width: 100px; /* устанавливаем ширину блока */
height: 100px;  /* устанавливаем высоту блока */
position: relative;  /* элемент с относительным позиционированием */
animation: iliketomoveit 4s steps(3,start) 500ms infinite reverse; /* "name (имя анимации-как в @keyframes) duration(длительность) timing-function (кривая скорости - шаговая анимация) delay (задержка 500 миллисекунд) iteration-count (количество повторов анимации - бесконечно) direction (направление анимации - reverse(в обратном направлении) )" */ 
} 
@keyframes iliketomoveit {
	0%   {left: 0px;} /* задаем положение элемента при начале анимации */ 
	50% {left: 500px; border-radius: 50px; background: plum; } /* задаем смещение элемента относительно левого края, изменяем цвет заднего фона и определяем форму границ (скругление) */ 
	100% {left: 0px;background: green; } /* задаем первоначальное положение и задаем цвет заднего фона по завершению анимации */ 
} 
</style>
</head>
	<body>
		<div class = "test">none</div>
	</body>
</html>

CSS свойства