CSS :: Свойство animation

Сокращенное css-свойство animation (от англ. animation – анимация) позволяет задать сразу несколько параметров анимации, которые перечисляются через пробел в следующей последовательности: animation-name || animation-duration || animation-timing-function || animation-delay || animation-iteration-count || animation-direction || animation-fill-mode || animation-play-state. Если значение какого-нибудь свойства не будет указано, то браузер применит значение по умолчанию. При этом нужно помнить, что данное универсальное свойство позволяет привязать к стилю только одну анимацию. Указывать через запятую имена нескольких анимаций нельзя.

Характеристики

Значение по умолчанию:
- animation-name: none
- animation-duration: 0s
- animation-timing-function: ease
- animation-delay: 0s
- animation-iteration-count: 1
- animation-direction: normal
- animation-fill-mode: none
- animation-play-state: running
Применяется: ко всем элементам, а также к псевдоэлементам ::before и ::after.
Наследуется: нет.
Анимируется: нет.
JavaScript: object.style.animation="value".

Синтаксис

animation: animation-duration || animation-timing-function || animation-delay || animation-iteration-count || animation-direction || animation-fill-mode || animation-play-state || [none | animation-name]

Значения

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

Ссылки

Официальный сайт W3C: https://www.w3.org/TR/css-animations-1/#animation

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/animation

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
		div{
		padding: 0px;
		width: 460px;
		height: 110px;
		border: solid 4px red;
		}
				
		/* Задаем свойства анимации отдельно 
		.anim_1{
		animation-name: example_1;
		animation-duration: 2s;
		animation-timing-function: ease-in-out;
		animation-delay: 1.3s;
		animation-iteration-count: infinite;
		animation-direction: alternate;
		animation-fill-mode: backwards;
		}*/
		
		/* Задаем свойства анимации вместе */
		.anim_1{
		animation: example_1 2s ease-in-out 1.3s infinite alternate backwards;
		}
		
		/* Анимируем ширину элемента */				
		@keyframes example_1{
			from {
			width: 0px;
			}
			
			to {
			width: 500px;
			}
		}
	</style>
	
</head>
<body>

	<div class="anim_1">	</div>
	
</body>	
</html>

Пример №1