Transition delay: transition-delay — CSS: Cascading Style Sheets
transition-delay | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |||
| 10.0+ | 1.0+ | 26.0+ | 11.6+ | 12.10+ | 3.0+ | 4.0+ | 16.0+ | 2.1 | 2.0+ |
Краткая информация
| Значение по умолчанию | 0s |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам, к псевдоэлементам ::before и ::after |
| Процентная запись | Неприменима |
| Ссылка на спецификацию | http://dev.w3.org/csswg/css-transitions/#transition-delay |
Версии CSS
Описание
Свойство transition-delay устанавливает время ожидания перед запуском эффекта перехода. Значение 0s или 0ms запускает анимацию сразу же. Отрицательное значение также включает анимацию без задержек, но может привести к изменению вида начала анимации.
Допустимо указывать несколько значений, перечисляя их через запятую. Каждое значение будет применяться к свойству, заданному в параметрах transition-property.
Синтаксис
transition-delay: <время> [,<время>]*
Значения
См. время.
Пример
HTML5CSS3IE 10+CrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>transition-delay</title> <style> #bar { top:-5.5em; right:5em; /* Положение */ padding: .5em; /* Поля */ margin: 0; /* Отступы */ position: absolute; /* Абсолютное позиционирование */ width: 2em; /* Ширина */ background: #333; /* Цвет фона */ color: #fff; /* Цвет текста */ text-align: center; /* Выравнивание по центру */ /* Анимация */ -webkit-transition: .4s ease-out; -webkit-transition-delay: 0.5s; -o-transition: .4s ease-out; -o-transition-delay: 0.5s; -moz-transition: .4s ease-out; -moz-transition-delay: 0.5s; transition: .4s ease-out; transition-delay: 0.5s; } #bar:hover { top: 0; } </style> </head> <body> <ul> <li>1</li><li>2</li> <li>3</li><li>4</li> <li>↓</li> </ul> </body> </html>
В данном примере при наведении курсора на стрелку, раскрывается блок с числами.
Объектная модель
[window.]document.getElementById(«elementID»).style.transitionDelay
Браузеры
Chrome до версии 26.0, Safari, Android и iOS поддерживают нестандартное свойство -webkit-transition-delay.
Opera до версии 12.10 поддерживает нестандартное свойство -o-transition-delay.
Firefox до версии 16.0 поддерживает нестандартное свойство -moz-transition-delay.
transition-delay | CSS | WebReference
Свойство transition-delay устанавливает время ожидания перед запуском эффекта перехода. Значение 0s запускает анимацию сразу же. Отрицательное значение также включает анимацию без задержек, но может привести к изменению вида начала анимации.
Допустимо указывать несколько значений, перечисляя их через запятую. Каждое значение будет применяться к свойству, заданному в параметрах transition-property.
Краткая информация
| Значение по умолчанию | 0s |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам, к псевдоэлементам ::before и ::after |
| Анимируется | Нет |
Синтаксис
transition-delay: <время> [,<время>]*Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Пример
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>transition-delay</title> <style> #bar { top:-5.5em; right:5em; /* Положение */ padding: .5em; /* Поля */ margin: 0; /* Отступы */ position: absolute; /* Абсолютное позиционирование */ width: 2em; /* Ширина */ background: #333; /* Цвет фона */ color: #fff; /* Цвет текста */ text-align: center; /* Выравнивание по центру */ /* Анимация */ transition: .4s ease-out; transition-delay: 0.5s; } #bar:hover { top: 0; } </style> </head> <body> <ul> <li>1</li><li>2</li> <li>3</li><li>4</li> <li>↓</li> </ul> </body> </html>Объектная модель
Объект.style.transitionDelay
Примечание
Chrome до версии 26.0, Safari до версии 6.1 и Android до версии 4.4 поддерживают свойство -webkit-transition-delay.
Opera до версии 12.10 поддерживает свойство -o-transition-delay.
Firefox до версии 16 поддерживает свойство -moz-transition-delay.
Спецификация
| Спецификация | Статус |
|---|---|
| CSS Transitions | Рабочий проект |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
| 10 | 12 | 1 | 26 | 11.6 | 12.10 | 3 | 6.1 | 4 | 16 |
| 2.1 | 4.4 | 4 | 16 | 10 | 12.10 | 3.2 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
Число указывает версию браузера, начиная с которой свойство поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 30.08.2017
Редакторы: Влад Мержевич
delay | HTML и CSS с примерами кода
Свойство transition-delay устанавливает время ожидания перед запуском эффекта перехода.
Значение 0s или 0ms запускает анимацию сразу же. Отрицательное значение также включает анимацию без задержек, но может привести к изменению вида начала анимации.
Допустимо указывать несколько значений, перечисляя их через запятую. Каждое значение будет применяться к свойству, заданному в параметрах transition-property.
Синтаксис
/* <time> values */
transition-delay: 3s;
transition-delay: 2s, 4ms;
/* Global values */
transition-delay: inherit;
transition-delay: initial;
transition-delay: unset;
Значения
Примечание
- Chrome до версии 26.0, Safari до версии 6.1 и Android поддерживают свойство
-webkit-transition-delay. - Opera до версии 12.10 поддерживает свойство
- Firefox до версии 16 поддерживает свойство
-moz-transition-delay.
Значение по-умолчанию: 0s
Применяется ко всем элементам, к псевдоэлементам ::before и ::after
Спецификации
Поддержка браузерами
Can I Use css-transitions? Data on support for the css-transitions feature across the major browsers from caniuse.com.
Описание и примеры
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>transition-delay</title> <style> #bar { top: -5.5em; right: 5em; /* Положение */ padding: 0.5em; /* Поля */ margin: 0; /* Отступы */ position: absolute; /* Абсолютное позиционирование */ width: 2em; /* Ширина */ background: #333; /* Цвет фона */ color: #fff; /* Цвет текста */ text-align: center; /* Выравнивание по центру */ /* Анимация */ transition: 0.4s ease-out; transition-delay: 0.5s; } #bar:hover { top: 0; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>↓</li> </ul> </body> </html>
Свойство transition-delay | CSS справочник
CSS свойстваОпределение и применение
CSS свойство transition-delay определяет, когда эффект перехода начнется (выступает в роли задержки начала эффекта).
Поддержка браузерами
CSS синтаксис:
transition-delay:"time(s/ms) | initial | inherit";
JavaScript синтаксис:
object.style.transitionDelay = "300ms"
Значения свойства
| Значение | Описание |
|---|---|
| time | Указывает число секунд(s) или миллисекунд(ms) ожидания перед тем, как эфект перехода начнется. Значение по умолчанию составляет 0 секунд (отсутствие времени ожидания). Допускается указывать более одного значения задержки перед началом эффекта перехода. В этом случае значения указываются через запятую, и каждое новое значение задержки соответствует значению (в том же порядке), которое определено в свойстве transition-property. Если список задержек меньше, чем количество значений (свойств), определённых свойством transition-property, то значения задержек эффекта перехода для оставшихся свойств будут использованы еще раз (по кругу). Если определено больше задержек, чем значений, указанных в свойстве transition-property, то список задержек усекается до количества значений этого свойства. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Версия CSS
CSS3Наследуется
Нет.Анимируемое
Нет.Пример использования
<!DOCTYPE html>
<html>
<head>
<title>Задержка эффекта перехода в CSS</title>
<style>
div {
width : 90px; /* устанавливаем ширину блока */
height : 90px; /* устанавливаем высоту блока */
background-color : yellow; /* устанавливает цвет заднего фона */
border : 5px dashed black; /* устанавливает пунктирную границу размером 5px черного цвета */
display : inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
margin-right : 15px; /* устанавливаем величину отступа от правого края элемента */
}
div:hover {
height : 200px; /* устанавливаем высоту блока при наведении на элемент (псевдокласс :hover) */
}
.test {
transition-duration : 5s; /* устанавливаем длительность перехода равную 5 секундам */
transition-delay : 1s; /* устанавливаем задержку перехода длительностью 1 секунда */
}
.test2 {
transition-duration : 2s; /* устанавливаем длительность перехода равную 2 секундам */
transition-delay : 2s; /* устанавливаем задержку перехода длительностью 2 секундч */
}
.test3 {
transition-duration : 400ms; /* устанавливаем длительность перехода равную 400 миллисекундам (0,4 секунды) */
transition-delay : 900ms; /* устанавливаем задержку перехода длительностью 900 миллисекунд (0,9 секунды) */
}
</style>
</head>
<body>
<div class = "test">delay 1s</div>
<div class = "test2">delay 2s</div>
<div class = "test3">delay 900ms</div>
</body>
</html>
Задержка эффекта перехода в CSS (свойство transition-delay).Установим, чтобы некоторые свойства получили переходный эффект и применим для них разную временную задержку:
<!DOCTYPE html>
<html>
<head>
<title>Переходные эффекты для конкретных свойств в CSS</title>
<style>
div {
width : 150px; /* устанавливаем ширину блока */
height : 120px; /* устанавливаем высоту блока */
background-color : yellow; /* устанавливаем цвет заднего фона */
border : 5px dashed black; /* устанавливаем пунктирную границу размером 5px черного цвета */
}
div:hover {
width : 100%; /* устанавливаем ширину блока при наведении на элемент (псевдокласс :hover) */
height : 200px; /* устанавливаем высоту блока при наведении на элемент */
background-color : rgba(255,0,0,.7); /* устанавливаем цвет заднего фона при наведении */
}
.test {
transition-duration : 5s; /* устанавливаем длительность перехода равную 5 секундам */
transition-delay : 3s, 1s; /* устанавливаем задержку перехода (1 значение = 1 значение свойства transition-property (width), 2 значение = 2 значение свойства transition-property (height) */
transition-property : width, height; /* устанавливаем свойства, которые получат переходный эффект (свойство background-color изменит цвет сразу в отличие от перечисленных в этом свойстве значений) */
}
</style>
</head>
<body>
<div class = "test">
duration: 5s;<br>
delay: 3s, 1s;<br>
property: width, height;
</div>
</body>
</html>
Переходные эффекты для конкретных свойств в CSS (свойство transition-property).CSS свойстваtransition-delay | CSS справочник
Поддержка браузерами
| 12.0+ | 10.0+ | 16.0+ | 26.0+ | 12.1+ | 6.1+ |
Описание
CSS свойство transition-delay указывает задержку перед началом анимации перехода. Задержка указывается в секундах(s) или миллисекундах(ms).
Если в качестве значения задержки указано 0s, 0ms или отрицательное значение, анимация перехода начнётся сразу как только значение определённого в transition-property свойства изменится.
Допускается указывать более одной задержки перед эффектом перехода, через запятую. Каждое новое значение задержки применяется к соответствующему свойству в том порядке, который определён в свойстве transition-property. Если список задержек меньше, чем количество свойств в transition-property, задержка эффекта перехода для оставшихся свойств пойдёт по второму кругу. Если определено больше задержек, чем указано свойств, то список задержек просто усекается до нужного количества.
| Значение по умолчанию: | 0 |
|---|---|
| Применяется: | ко всем элементам |
| Анимируется: | нет |
| Наследуется: | нет |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object.style.transitionDelay=»2s» |
Синтаксис
transition-delay: время|inherit;
Значения свойства
| Значение | Описание |
|---|---|
| время | Указывает, сколько секунд(s) или миллисекунд(ms) будет задержка перед началом анимации перехода. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Пример</title>
<style>
div { width: 100px; height: 100px; }
#test1 {
background-color: red;
transition-property: width;
transition-duration: 2s;
transition-delay: 1s;
}
#test1:hover { width: 300px; }
#test2 {
background-color: blue;
transition-property: width, height;
transition-duration: 2s, 6s;
transition-delay: 3s;
}
#test2:hover { width: 300px; height: 300px; }
</style>
</head>
<body>
<p>Наведите на красный и/или синий квадрат, чтобы увидеть эффект перехода.<p>
<div></div>
<div></div>
</body>
</html>
Результат данного примера:
Наведите на красный и/или синий квадрат, чтобы увидеть эффект перехода.
Свойство transition-delay — задержка перед запуском плавного перехода transition
Свойство transition-delay устанавливает задержку перед запуском плавного перехода transition.
Данное свойство входит в свойство-сокращение transition.
Синтаксис
селектор {
transition-delay: время в s или ms;
}
Значения
| Значение | Описание |
|---|---|
| s | Задает время в секундах (например 3s). Можно задавать дробные значения, например, 0.5s — половина секунды. |
| ms | Задает время в миллисекундах (например 3ms). Одна секунда — это 1000 миллисекунд. |
Значение по умолчанию: 0s.
Пример
Наведите мышкой на блок — 3 секунды ничего не будет происходить (стоит задержка 3s), а затем он плавно изменит свою ширину за 2 секунды. Если затем убрать мышь — то снова 3 секунды ничего не будет происходить, а затем ширина плавно уменьшится до исходного значения:
<div></div> #elem {
border: 1px solid black;
transition-duration: 2s;
transition-property: width;
transition-delay: 3s;
height: 50px;
width: 100px;
}
#elem:hover {
width: 400px;
}
:
Пример
Наведите мышкой на блок — он сначала изменит свою ширину за 2 секунды, а потом изменит свою высоту за 4 секунды. Свойства будут меняться последовательно, так как для высоты установлена в 3 секунды (время изменения ширины). Если убрать мышь — то изменения произойдут в обратном порядке: сначала уменьшится ширина, а потом уменьшится высота:
<div></div> #elem {
border: 1px solid black;
transition-duration: 2s, 4s;
transition-property: width, height;
transition-delay: 0s, 3s;
width: 100px;
height: 25px;
}
#elem:hover {
width: 400px;
height: 50px;
}
:
Смотрите также
- свойство transition-property,
которое задает имя свойства для плавного перехода - свойство transition-duration,
которое задает длительность плавного перехода - свойство transition-timing-function,
которое задает временную функцию для плавного перехода - свойство transition,
которое является сокращением для плавного перехода - свойство animation,
с помощью которого можно сделать анимацию
delay — свойство css :: руководство cssdot.ru
Свойство transition-delay определяет паузу перед началом анимации. Значение transition-delay, по умолчанию, равняется 0 и не наследуется от родительского элемента. Данное свойство может принимать несколько значений, разделенных запятыми, и тогда они будут соответствовать функциям для различных css-свойств, в том порядке, в котором они установлены в transition-property. transition-delay может принимать как положительные так и отрицательные значения.
Допустимые значения
- длительность — любой временной промежуток, в одной из следующих единиц измерений:
- ms — микросекунды
- s — секунды
при нулевом значении анимация начинается сразу же после изменения
при отрицательных значения анимация начинается сразу же, но с того момента времени, который соответствует сдвигу от начала на указанное значение, то есть если мы укажем, например, длительность анимации (transition-duration) в 10 секунд, а паузу (transition-delay) в -5 секунд, то анимация начнется сразу с середины анимационного цикла.
Свойство transition-delay определено в спецификации CSS 3 модуль Transitions (анимационные переходы), применяется к все элементы, и псевдоэлементы :before и :after, и действует на всех визуальный носителях, его значение не наследуется от родительского элемента в иерархии документа, На данный момент свойство поддерживается во всех основных браузерах.
Смотри также:
- transition — свойства анимационного перехода
- transition-property — имя css-свойства, к которому будет применен анимационный переход.
- transition-duration — длительность анимационного перехода
- transition-timing-function — функция зависимости значения css-свойства от времени во течении анимационного перехода
- -moz-transition — свойства анимационного перехода
- -moz-transition-property — имя css-свойства, к которому будет применен анимационный переход.
- -moz-transition-duration — длительность анимационного перехода
- -moz-transition-timing-function — функция зависимости значения css-свойства от времени во течении анимационного перехода
- -moz-transition-delay — задержка перед выполнением анимационного перехода
- -webkit-transition — свойства анимационного перехода
- -webkit-transition-property — имя css-свойства, к которому будет применен анимационный переход.
- -webkit-transition-duration — длительность анимационного перехода
- -webkit-transition-timing-function — функция зависимости значения css-свойства от времени во течении анимационного перехода
- -webkit-transition-delay — задержка перед выполнением анимационного перехода
- -o-transition — свойства анимационного перехода
- -o-transition-property — имя css-свойства, к которому будет применен анимационный переход.
- -o-transition-duration — длительность анимационного перехода
- -o-transition-timing-function — функция зависимости значения css-свойства от времени во течении анимационного перехода
- -o-transition-delay — задержка перед выполнением анимационного перехода
Краткое описание
задержка перед выполнением анимационного перехода
Синтаксис:
<длительность> [, <длительность>]*
По умолчанию:
0
Применяется к:
все элементы, и псевдоэлементы :before и :after
Наследование:
не наследуетсяТип носителя:
визуальный
Объектная модель документа (DOM):
[элемент].style.transitionDelay
Кроссбраузерная совместимость
Internet Explorer
Firefox
Chrome
Safari
Opera
Псевдоэлементы — CSS: каскадные таблицы стилей
Псевдоэлемент CSS — это ключевое слово, добавляемое к селектору, которое позволяет вам стилизовать определенную часть выбранных элементов. Например, :: first-line можно использовать для изменения шрифта первой строки абзаца.
p :: first-line {
цвет синий;
преобразование текста: прописные буквы;
} Примечание: В отличие от псевдоэлементов, псевдоклассов могут использоваться для стилизации элемента на основе его состояния .
selector :: псевдоэлемент {
стоимость имущества;
} В селекторе можно использовать только один псевдоэлемент. Он должен стоять после простых селекторов в операторе.
Примечание: Как правило, следует использовать двойные двоеточия ( :: ) вместо одинарного двоеточия (: ). Это отличает псевдоклассы от псевдоэлементов. Однако, поскольку это различие не присутствовало в более старых версиях спецификации W3C, большинство браузеров поддерживают оба синтаксиса для исходных псевдоэлементов.
Псевдоэлементы, определенные набором спецификаций CSS, включают следующее:
| Спецификация | Статус | Комментарий |
|---|---|---|
| Уровень CSS 1 | Рекомендация | Определенные псевдоклассы и псевдоэлементы. |
| Браузер | Самая низкая версия | Поддержка |
|---|---|---|
| Internet Explorer | 8.0 | : псевдоэлемент |
| 9,0 | : псевдоэлемент :: псевдоэлемент | |
| Firefox (Gecko) | 1,0 (1,0) | : псевдоэлемент |
| 1,0 (1,5) | : псевдоэлемент :: псевдоэлемент | |
| Опера | 4,0 | : псевдоэлемент |
| 7.0 | : псевдоэлемент :: псевдоэлемент | |
| Safari (WebKit) | 1,0 (85) | : псевдоэлемент :: псевдоэлемент |
transition — CSS: Cascading Style Sheets
Это свойство является сокращением для следующих свойств CSS:
переход: маржа-право 4с;
переход: margin-right 4s 1s;
переход: маржа-право 4s легкость входа-выхода;
переход: маржа-вправо 4 с легкость входа-выхода 1 с;
переход: край-правый 4s, цвет 1s;
переход: все 0.5s легкость выхода;
переход: наследование;
переход: начальный;
переход: вернуться;
переход: не установлен;
Переход Свойство определяется как один или несколько переходов с одним свойством, разделенных запятыми.
Каждый переход отдельного свойства описывает переход, который должен применяться к отдельному свойству (или специальные значения все и нет ). Включает:
- ноль или одно значение, представляющее свойство, к которому должен применяться переход.Это может быть любое из:
- ключевое слово
нет - ключевое слово
все - a
- ключевое слово
- ноль или одно значение
- ноль, один или два
<время>значений. Первое значение, которое может быть проанализировано как время, присваивается длительности переходаtransition-delay.
Посмотрите, как поступают, когда списки значений свойств не одинаковой длины. Короче говоря, дополнительные описания переходов, превышающие количество фактически анимируемых свойств, игнорируются.
Простой пример
В этом примере выполняется четырехсекундный переход размера шрифта с задержкой в одну секунду, когда пользователь наводит курсор на элемент.
HTML
Наведите курсор на меня CSS
.target {
размер шрифта: 14 пикселей;
переход: font-size 4s 1s;
}
.target: hover {
размер шрифта: 36 пикселей;
}
Есть еще несколько примеров переходов CSS, включенных в статью Использование переходов CSS.
Таблицы BCD загружаются только в браузере
CSS transition-delay Свойство
Пример
Подождите 2 секунды, прежде чем начнется эффект перехода:
div {
задержка перехода: 2 с;
}
Определение и использование
Свойство transition-delay указывает, когда начнется эффект перехода.
Значение задержки перехода определяется в секундах (с) или миллисекундах (мс).
| Значение по умолчанию: | 0 с |
|---|---|
| Унаследовано: | нет |
| Анимируемое: | нет. Прочитать про animatable |
| Версия: | CSS3 |
| Синтаксис JavaScript: | объект .style.transitionDelay = «2s» Попробуй |
Поддержка браузера
Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.
Числа, за которыми следуют -webkit-, -moz- или -o- указывают первую версию, которая работала с префиксом.
| Объект | |||||
|---|---|---|---|---|---|
| задержка перехода | 26,0 4,0 -webkit- | 10,0 | 16,0 4,0 млн унций- | 6,1 3,1 -webkit- | 12,1 10,5 -о- |
Синтаксис CSS
задержка перехода: время | начальное | наследование;
Значения свойств
| Значение | Описание |
|---|---|
| время | Задает количество секунд или миллисекунд ожидания до начала эффекта перехода. |
| начальный | Устанавливает для этого свойства значение по умолчанию.Читать про начальные |
| наследовать | Наследует это свойство от своего родительского элемента. Читать про наследство |
Связанные страницы
УчебникCSS: переходы CSS
Ссылка на HTML DOM: свойство transitionDelay
задержка перехода | CSS-уловки
Свойство transition-delay , обычно используемое как часть сокращения transition , используется для определения времени задержки начала перехода.
.delay-me {
задержка перехода: 0,25 с;
} Значение может быть одним из следующих:
- Допустимое значение времени, определенное в секундах или миллисекундах, например
1,3 сили125 мс - Список значений времени, разделенных запятыми, для определения отдельных значений задержки при нескольких переходах для одного элемента, например.
1 с, цвет фона, преобразование 350 мс
Значение по умолчанию для transition-delay — 0s , что означает, что задержки не будет и переход начнется немедленно.Значение времени может быть выражено в виде десятичного числа для более точного отсчета времени.
Если для перехода задано отрицательное значение задержки, это приведет к немедленному началу перехода (без задержки), однако переход начнется в середине процесса, как если бы он уже начался.
Следующее перо показывает эффект наведения курсора на блок, который использует значение задержки перехода , равное 2 с с длительностью перехода 1 с :
См. Демонстрацию задержки перехода Pen
от CSS-Tricks (@ css-tricks)
на CodePen.
Теперь сравните это со следующей демонстрацией, которая имеет задержку -1 с и длительность 3 с :
См. Демонстрацию Pen
Negative transition delay от CSS-Tricks (@ css-tricks)
на CodePen.
Обратите внимание, что во втором примере видны только последние две трети фактического перехода и нет задержки. Отрицательное значение удаляет задержку и эффективно сокращает продолжительность.
Для совместимости со всеми поддерживаемыми браузерами требуются префиксы поставщиков, при этом стандартный синтаксис объявлен последним:
.пример {
-webkit-transition-delay: 500 мс;
-moz-transition-delay: 500 мс;
-o-transition-delay: 500 мс;
задержка перехода: 500 мс;
} IE10 (первая стабильная версия IE с поддержкой transition-delay ) не требует префикса -ms- .
Обычный вариант использования — ступенчатые переходы:
См. Pen
Staggered Animations Криса Койера (@chriscoyier)
на CodePen.
Сопутствующие объекты
Другие ресурсы
Поддержка браузера
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 4 * | 5 * | 10 | 12 | 5.1 * |
Мобильный / планшет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 92 | 90 | 2,1 * | 6,0-6,1 * |
CSS3 transition-delay — Tutorial Republic
Тема: Справочник по свойствам CSS3 Пред. | След.
Описание
Свойство CSS transition-delay определяет, когда начнется переход (например,г. значение 2 с означает, что переход начнется через 2 секунды после его применения.). Значение этого свойства может быть указано в секундах (с) или миллисекундах (мс).
В следующей таблице приведены контекст использования и история версий этого свойства.
Синтаксис
Синтаксис свойства задается следующим образом:
В приведенном ниже примере показано свойство transition-delay в действии.
кнопка {
фон: # fd7c2a;
/ * Для Safari 3.0+ * /
-webkit-transition-свойство: фон;
-webkit-transition-duration: 4s;
-webkit-transition-delay: 2 с;
/ * Стандартный синтаксис * /
свойство-переход: фон;
продолжительность перехода: 4 с;
задержка перехода: 2 с;
}
button: hover {
фон: # 3cc16e;
} Примечание. Для этого свойства разрешены отрицательные значения.Тем не менее, похоже, что он начал выполняться на полпути в своем переходном цикле, например задержка перехода в 2 секунды запускает переход сразу, но начинается через 2 секунды после перехода.
Значения свойств
В следующей таблице описаны значения этого свойства.
| Значение | Описание |
|---|---|
| время | Определяет количество секунд или миллисекунд (мс) ожидания перед началом перехода.Значение по умолчанию — 0 с. |
начальный | Устанавливает для этого свойства значение по умолчанию. |
наследовать | Если указано, связанный элемент принимает вычисленное значение свойства задержки перехода своего родительского элемента . |
Совместимость с браузером
Свойство transition-delay поддерживается во всех основных современных браузерах.
Базовая поддержка -
|
Дополнительная литература
См. Учебник по теме: Переходы CSS3.
Связанные свойства: переход , продолжительность перехода , свойство перехода , функция синхронизации перехода .
Свойство CSS transition-delay - использование, синтаксис, примеры
Свойство CSS transition-delay указывает, когда должен начаться эффект перехода.
Свойство задержки перехода является одним из свойств CSS3.
Значение по умолчанию - 0 с, что означает, что эффект перехода начинается немедленно.
Временное смещение, указанное в свойстве transition-delay, смещает анимацию перехода на указанную величину. Смещение также может быть отрицательным. Когда отрицательное временное смещение используется в качестве значения для свойства transition-delay, переход будет выполнять измененный момент свойства, но будет казаться, что выполнение началось в указанном смещении.
Значение может быть либо допустимым значением времени, определенным в секундах или миллисекундах, либо списком значений времени, разделенных запятыми, указанным для одного элемента.Когда у нас есть список имен свойств, разделенных запятыми, этот список обычно сопоставляется со значениями других свойств, связанных с переходом (продолжительность перехода, функция времени перехода, свойство перехода).
Для максимальной совместимости браузеров с этим свойством используются расширения, такие как -webkit- для Safari, Google Chrome и Opera (более новые версии), -moz- для Firefox, -o- для более старых версий Opera.
Синтаксис¶
задержка перехода: время | начальная | наследовать; Пример свойства задержки перехода: ¶
Название документа
<стиль>
div {
ширина: 150 пикселей;
высота: 150 пикселей;
фон: # 8ebf42;
-webkit-transition-свойство: ширина;
-moz-свойство-перехода: ширина;
-o-свойство-перехода: ширина;
свойство-переход: ширина;
-webkit-transition-duration: 1 с;
-moz-transition-duration: 1 с;
-o-transition-duration: 1 с;
продолжительность перехода: 1 с;
-webkit-transition-delay: 0 с;
-moz-transition-delay: 0 с;
-o-transition-delay: 0 с;
задержка перехода: 0 с;
}
div: hover {
ширина: 300 пикселей;
}
Пример свойства Transition-delay
Наведите указатель мыши на элемент, чтобы увидеть эффект.
Попробуйте сами »Пример свойства transition-delay с задержкой в 2 секунды: ¶
Название документа
<стиль>
div {
ширина: 150 пикселей;
высота: 150 пикселей;
фон: # 8ebf42;
-webkit-transition-property: ширина высота;
-moz-transition-property: ширина высота;
-o-свойство-перехода: ширина высота;
свойство-переход: ширина высота;
-webkit-transition-duration: 3 с;
-moz-transition-duration: 3 с;
-o-transition-duration: 3 с;
продолжительность перехода: 3 с;
-webkit-transition-delay: 2 с;
-moz-transition-delay: 2 с;
-o-transition-delay: 2 с;
задержка перехода: 2 с;
}
div: hover {
ширина: 300 пикселей;
высота: 300 пикселей;
}
Пример свойства Transition-delay
Наведите указатель мыши на элемент и подождите 2 секунды, чтобы увидеть эффект.
Попробуйте сами »Values¶
transition-delay · Документация WebPlatform
Сводка
Определяет, когда начнется переход. Значение «0s» означает, что переход будет выполнен, как только свойство будет изменено. В противном случае значение указывает смещение с момента изменения свойства, и переход задержит выполнение на это смещение.
Обзорная таблица
- Начальное значение
-
0с - Относится к
- все элементы,: до и: после псевдоэлементов
- Унаследовано
- Нет
- Медиа
- интерактивный
- Расчетное значение
- То же, что и указанное значение
- Анимационный
- Нет
- Свойство объектной модели CSS
-
Задержка перехода - процентов
- НЕТ
Синтаксис
Значения
- время
- Число с плавающей запятой, за которым следует указатель единиц времени (
мсилис).Для получения дополнительной информации о поддерживаемых единицах времени см. Справочник по значениям и единицам CSS .
Значения округлены до второго десятичного знака. Каждой задержки перехода сопоставляется соответствующее свойство объекта, идентифицированное в свойстве свойства перехода . Если объявлено больше значений задержки перехода , чем соответствующие свойства объекта, указанные в свойстве свойства перехода , избыточные значения задержки перехода игнорируются.Если объявлено меньше значений задержки перехода, чем соответствующие свойства объекта, идентифицированные в свойстве свойства перехода , список значений задержки перехода повторяется с начала до тех пор, пока свойства объекта не будут исчерпаны.
Примеры
div: hover {
цвет фона: красный;
задержка перехода: 3 с;
}
Посмотреть живой пример
Информация о стандартах
Связанные спецификации
- Переходы CSS
- W3C Рабочий проект
