CSS свойство animationcss3

CSS свойства

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

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

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


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


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

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

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
animationcss343.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 duration timing-function delay iteration-count direction fill-mode play-state"; /* имя анимации может быть указано в конце списка */

JavaScript синтаксис:

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

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

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