Ссылки на каскадные стили CSS - animation-play-state.
Поддержка Браузеров
Интернет эксплорер
Google Chrome
Опера
Firefox
Сафари, то есть тег поддерживается во всех основных браузерах.
Safari и Chrome поддерживают альтернативу animation-play-state.
Внимание!!! Свойство animation-play-state( анимация-игра-состояние) не поддерживается в Internet Explorer 9 и более ранних версий.
Определение и использование. Свойство animation-play-state определяет будет ли анимация работать или приостановлена. Внимание!!! Свойство animation-play-state используется в JavaScript для приостановки анимацию в середине цикла.
Самое мощное здесь даже не в том, что производится некое оживление некого участка страницы сайта. Самое мощное здесь в том, что функция animation-play-state, которая действует через стили CSS3 самостоятельно работает даже при отключения JavaScripta в браузере Вашего компьютера, то есть Вам не надо заморачиваться: будет работать эта функция в том или ином случае на страницах посетителей?
Синтаксис:
animation-play-state: paused|running|initial|inherit;
Определение и использование
Свойство animation-play-state указывает - анимация работает или приостановлена.
Внимание!!! это свойство используется в JavaScript, чтобы приостанавливать анимацию в середине цикла.
Описание и использование
Значение по умолчанию: |
running |
наследует: |
нет |
Версия: |
CSS3 |
JavaScript синтаксис: |
"объект".style.animationPlayState="приостановлена" |
Свойства Значение
Значение |
Описание |
paused |
Указывает, что анимация приостановлена |
running |
Значение по умолчанию. Указывает начало выполнения анимации |
initial |
Это свойство задает значение по умолчанию. |
inherit |
Наследует это свойство от своего родительского элемента. |
Пишем программу - Пауза анимации:
< !DOCTYPE html>
< html>
< head>
< style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 2s;
animation-play-state:paused;
/* Safari и Chrome */
-webkit-animation:mymove 2s;
-webkit-animation-play-state:paused;
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {left:0px;}
to {left:200px;}
}
< /style>
< /head>
< body>
< p>< strong>Внимание!!! < /strong> анимация-play-состояние не
поддерживается в Internet Explorer 9 и более ранних версий.< /p>
< div>< /div>
< /body>
< /html>
Результат программы:
Внимание!!! анимация-play-состояние не поддерживается в Internet Explorer 9 и более ранних версий.
обратно на главную назад дальше вперед
ПОНРАВИЛОСЬ? ПОДЕЛИСЬ с ДРУЗЬЯМИ:
|