CSS :: Свойство animation
http://belarusweb.net
Основы создания сайтов

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]

Значения

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

Ссылки

Примеры

HTML Результат BwCodes
<!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