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