Авторский знак. 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-delay.

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

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

Определение и использование. Свойство transition-delay устанавливает время ожидания перед запуском анимации перехода. Значение времени 0s или времени 0ms запускает мультипликацию тотчас( обратите внимание, что значение времени записаны в английском s, не пишите русскую букву с). Отрицательное значение времени запускает анимацию без задержек, но может привести к изменению вида начала анимации.

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

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


Синтаксис:

              transition-delay: time|initial|inherit;

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

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


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

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


Пишем программу для установки задержки при анимации:

< !DOCTYPE>
< html>
< head>
< style> 
div
{
width:120px;
height:50px;
background:#F7C;
transition-property:width;
transition-duration:4s;
transition-delay:3s;

/* Safari */
-webkit-transition-property:width; 
-webkit-transition-duration:4s;
-webkit-transition-delay:3s;
}

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

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

< div id="rr">< /div>

< p>Наведите указатель мыши на элемент div - малинового цвета, чтобы 
                                            увидеть эффект перехода.< /p>
< p>< b>Внимание!!!< /b> задержка эффекта будет 3секунды до начала.< /p>

< /body>
< /html>                     

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

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

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

Внимание!!! задержка эффекта будет 3секунды до начала.




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
... ... ...
ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: