transition-delay | Свойство CSS - Справочник CSS3 | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Пятница, 09.12.2016
Главная » Справочник CSS3 » Свойства перехода


2D & 3D ТрансформацияСвойства контента
Свойства импортаСвойства углов
Свойства границСвойства анимации
ПсевдоклассыПсевдоэлементы
Свойства размераСвойства контура
Свойства переходаСвойства печати
Свойства тениСвойства отступов
Свойства текстаСвойства колонок
Свойства полейПозиционирование
Свойства интерфейсаТипы значений
Полезные статьиСвойства списка
Свойства шрифтаСвойства таблицы
Свойства фонаВендорные префиксы



Адаптивный сайт - aTmpl


transition-delay | Свойство CSS

Свойство transition-delay устанавливает время задержки перед началом анимированного перехода.




Свойство transition-delay устанавливает время задержки перед началом анимированного перехода,значения указываются в секундах ( s ) или миллисекундах ( ms ).Установленных значений может быть несколько,при таких условиях прописывайте значения через запятую.Сам переход будет предназначен для свойства указанного в свойстве transition-property или transition например для ширины = ( transition-property:weight; ) или ( transition:weight 3s; ).Существуют альтернативные свойства для браузеров.Для Mozila -moz-transition-delay,для Safari и Chrome -webkit-transition-delay,а для Opera -o-transition-delay.Свойство применимо ко всем элементам и псевдоэлементам :before и :after,создано в версии CSS3 и проходит валидацию согласно версии CSS3.




Дополнительные свойства применяемые к transition-delay


Свойство
Описание
-moz-transition-delayАльтернативное свойство для браузера Mozila
-webkit-transition-delayАльтернативное свойство для браузеров Safari и Chrome
-o-transition-delayАльтернативное свойство для браузера Opera

Дополнительные значения применяемые к transition-delay


Значение
Описание
sЗначение в секундах
msЗначение в миллисекундах

Свойство работает в браузерах




Пример применения свойства



<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство transition-delay</title>
<style type="text/css">
<!--
div {
width:99%;
height:50px;
background:indigo;
border:2px solid blue;
font-weight:bold;
color:white;
text-decoration:blink;
}
div#sekund {
transition-property:width;
transition-duration:3s;
transition-delay:1s;
-moz-transition-property:width;
-moz-transition-duration:3s;
-moz-transition-delay:1s;
-webkit-transition-property:width;
-webkit-transition-duration:3s;
-webkit-transition-delay:1s;
-o-transition-property:width;
-o-transition-duration:3s;
-o-transition-delay:1s;
}
div#millisekund {
transition-property:width;
transition-duration:3s;
transition-delay:20ms;
-moz-transition-property:width;
-moz-transition-duration:3s;
-moz-transition-delay:20ms;
-webkit-transition-property:width;
-webkit-transition-duration:3s;
-webkit-transition-delay:20ms;
-o-transition-property:width;
-o-transition-duration:3s;
-o-transition-delay:20ms;
}
div:hover {
width:150px;
}
-->
</style>
</head>
<body>
<center>
<div id="sekund">Задержка = 1 секунда</div><br>
<div id="millisekund">Задержка = 20 миллисекунд</div>
</center>
</body>
</html>

Пример в действии




Поэкспериментируйте сами





Русские шрифты






Источник: http://www.w3.org/TR/css3-transitions/#transition-delay
Категория: Свойства перехода | Добавил: IZOTOP (30.05.2012) | Автор: Меренков Михаил E W
Просмотров: 1259 | Теги: css, пример, transition-delay, style, задержка | Рейтинг: 0.0/0

Вопросов / Советов / Предложений - относящихся к материалу: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]