Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.
Нажимай и поддержи.

Пн Вт Ср Чт Пт Сб Вс
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30


Чувашия-это моя Россия

Ссылки на каскадные стили CSS - transition-duration.

Поддержка Браузеров

Internet Explorer Интернет эксплорер Google Chrome Google Chrome Opera Опера Firefox Firefox Safari Сафари, то есть поддерживается во всех основных браузерах.

Внимание!!! Свойство transition-duration не поддерживается в IE9 и более ранних версий.

Определение и использование. Свойство transition-duration определяет, сколько секунд или миллисекунд продолжается эффект перехода необходимое для завершения. При этом по умолчанию значение времени равное 0s показывает, что никакой анимации не будет и трансформация произойдет мгновенно. Если хотите, то можете указать несколько значений времени, перечисляя эти значения через запятые. Каждое значение времени применяется к свойствам, заданным через transition-property.

Еще можно сказать, что отрицательные значения времени трактуются как нулевые. Повторюсь, свойство transition-duration может иметь несколько значений, разделенных запятыми, и при этом эти значения будут соответствовать анимации для различных css-свойств, в том порядке, к каком находятся в transition-property.

Особенно интересное и полезное в данном случае не в том, что совершается какое-то изменение какого-то участка( элемента) страницы сайта. Вся удивительная и необходимая информация содержится в том, что свойство transition-duration, которое действует через стили CSS3 самостоятельно и независимо работает и при отключения JavaScripta в браузере Вашего компьютера. Вам не надо гадать: будет работать - не будет работать, потому как работает постоянно и стабильно.


Синтаксис:

           transition-duration: time|initial|inherit;

Описание и Использование

Значение по умолчанию: 0
наследует: нет
Версия: CSS3
JavaScript синтаксис: object.style.transitionDuration="1s"


Свойства Значения

Значение Описание
time Указывает, сколько секунд или миллисекунд требуется, чтобы закончить. Значение по умолчанию-0, что означает то эффекта не будет.
initial Это свойство задает значение по умолчанию.
inherit Наследует это свойство от своего родительского элемента.


Пишем программу:

< !DOCTYPE>
< html>
< head>
< style> 
div
{
width:120px;
height:50px;
background: #F7C;
transition-property:width;
transition-duration:3s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:3s;
}

div:hover
{
width:550px;
}
< /style>
< /head>
< body>

< p>< b>Внимание!!!< /b> Этот пример не работает в IE9 и более ранних версий.< /p>

< div>< /div>

< p>Наведите указатель мыши на элемент div , чтобы увидеть эффект перехода.< /p>

< /body>
< /html>                      

Результат программы:

Внимание!!! Этот пример не работает в IE9 и более ранних версий.

Наведите указатель мыши на элемент div , чтобы увидеть эффект перехода.




seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...
ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: