Свойство animation-play-state

Последнее обновление: 22.12.2010

Свойство animation-play-state определяет, работает ли анимация или стоит на паузе (можно указать несколько значений через запятую).

Допустимые значения

running — анимация работает
paused — анимация стоит на паузе

При установке значения paused анимация останавливается, а при установке значения running продолжается с прерванного места.

Значение по умолчанию	running
Применимо	к блочным и строчным элементам
Наследование	нет
Версия CSS	CSS 3
Поддерживается браузерами

Пример

			
			div {

width:100px;

height:50px;

position:absolute;

top:5px;

animation-name:'slide';

animation-duration: 10s;

animation-play-state:paused;

}

Твой код:

<html>
<head>
<title></title>
<style type="text/css">

</style>
</head>
<body>
<p>На момент выхода статьи в прямом виде это свойство не поддерживается ни одним из распространенных браузеров</p>
<div>
Этот блок поедет по горизонтали слева направо в течение 20с и почернеет, причем за первые 10с он проедет всего 10% (20px) расстояния и побелеет, а еще за 6с он доедет до позиции left:100px; и покраснеет. По вертикали блок будет равномерно ехать снизу верх в течение первых 10с (эта анимация поставлена на паузу).
</div>
</body>
</html>

Результат:

большой полигон

Заметки

Это свойство относится к модулю CSS Animations Module Level 3 находящемся в разработке W3C, поэтому в нем возможны дополнения.

Safari 4.0 и выше Chrome 3.0 и выше поддерживают аналогичное свойство -webkit-animation-play-state, а также поддерживают возможность определить список анимаций с помощью ключевого слова @-webkit-keyframes.

По теме

Теги: переходы, анимация, CSS3, CSS свойства

Показать комментарии

Свойство animation-play-state

Допустимые значения

Пример

Твой код:

Результат:

Заметки

По теме

CSS по стандартам

CSS расширения

Инфо

Разделы