transition-duration | 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-duration |
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Задаёт время в секундах или миллисекундах, сколько должна длиться анимация перехода до её завершения. По умолчанию значение равно 0s, это означает, что никакой анимации нет, переход происходит мгновенно.
Можно указать несколько значений, перечисляя их через запятую. Каждое значение применяется к свойствам, заданным через transition-property.
Синтаксис
transition-duration: <время> [,<время>]*
Значения
См. время.
Пример
HTML5CSS3IE 10+CrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>transition-duration</title>
<style>
.warn {
padding: 20px;
-webkit-transition-duration: 2s;
-o-transition-duration: 2s;
-moz-transition-duration: 2s;
transition-duration: 2s;
}
.warn:hover {
background: #fc0;
}
</style>
</head>
<body>
<div>Вы не учли, что скалярное
поле необходимо и достаточно!</div>
</body>
</html> В данном примере при наведении курсора на блок текста меняется цвет фона под блоком.
Браузеры
Chrome до версии 26.0, Safari, Android и iOS поддерживают нестандартное свойство -webkit-transition-duration.
Opera до версии 12.10 поддерживает нестандартное свойство -o-transition-duration.
Firefox до версии 16.0 поддерживает нестандартное свойство -moz-transition-duration.
transition-duration | CSS | WebReference
Задаёт время в секундах или миллисекундах, сколько должна длиться анимация перехода до её завершения. По умолчанию значение равно 0s, это означает, что никакой анимации нет, переход происходит мгновенно.
Можно указать несколько значений, перечисляя их через запятую. Каждое значение применяется к свойствам, заданным через transition-property.
Краткая информация
| Значение по умолчанию | 0s |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам, к псевдоэлементам ::before и ::after |
| Анимируется | Нет |
Синтаксис ?
transition-duration: <время> [,<время>]*Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| 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-duration</title> <style> .warn { padding: 20px; transition-duration: 2s; } .warn:hover { background: #fc0; } </style> </head> <body> <div>Вы не учли, что скалярное поле необходимо и достаточно!</div> </body> </html>
В данном примере при наведении курсора на блок текста меняется цвет фона под блоком.
Объектная модель
Объект.style.transitionDuration
Примечание
Chrome до версии 26.0, Safari до версии 6.1 и Android до версии 4.4 поддерживают свойство -webkit-transition-duration.
Opera до версии 12.10 поддерживает свойство -o-transition-duration.
Firefox до версии 16 поддерживает свойство -moz-transition-duration.
Спецификация ?
| Спецификация | Статус |
|---|---|
| CSS Transitions | Рабочий проект |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
×Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 30.08.2017
Редакторы: Влад Мержевич
transition-duration | CSS справочник
Поддержка браузерами
| 12.0+ | 10.0+ | 16.0+ | 26.0+ | 12.1+ | 6.1+ |
Описание
CSS свойство transition-duration указывает, продолжительность анимации перехода в секундах(s) или миллисекундах(ms).
Допускается указывать более одной продолжительности эффекта перехода, через запятую. Каждая новая продолжительность применяется к соответствующему свойству в том порядке, который определён в свойстве transition-property. Если список продолжительности меньше, чем количество свойств в transition-property, продолжительность эффекта перехода для оставшихся свойств пойдёт по второму кругу. Если список продолжительности больше, чем указано свойств, то список продолжительности просто усекается до нужного количества.
Примечание: всегда указывайте значение свойства transition-duration, так как, если его не указать, продолжительность будет равна 0 и никакого эффекта не будет.
| Значение по умолчанию: | 0 |
|---|---|
| Применяется: | ко всем элементам |
| Анимируется: | нет |
| Наследуется: | нет |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object.style.transitionDuration=»5s» |
Синтаксис
transition-duration: время|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: 3s;
}
#test1:hover { width: 600px; }
#test2 {
background-color: blue;
transition-property: width, height;
transition-duration: 3s, 6s;
}
#test2:hover { width: 600px; height: 300px; }
</style>
</head>
<body>
<p>Наведите на красный и/или синий квадрат, чтобы увидеть эффект перехода.<p>
<div></div>
<div></div>
</body>
</html>
Результат данного примера:
Наведите на красный и/или синий квадрат, чтобы увидеть эффект перехода.
duration — свойство css :: руководство cssdot.ru
Свойство transition-duration определяет длительность анимированного перехода для заданного css-свойства из одного значения в другое. Значение transition-duration, по умолчанию, равняется 0 (анимация отсутствует, заданное css-свойство изменяется мнгновенно) и не наследуется от родительского элемента. Длительность перехода может задаваться любым доступным способом в соответствии со стандартом CSS 3 для велечин типа <длительность>
Допустимые значения
- длительность — любое не отрицательное значение, в одной из следующих единиц измерений:
- ms — микросекунды
- s — секунды
Примеры использования
В данном примере будет установлена различная длительность анимации. Будут меняться свойства padding-left от 0 до 100% и opacity — от 1.0 до 0
| CSS | Пример |
|---|---|
.line1 {
transition-duration: 500ms;
}
| 500ms |
.line2 {
transition-duration: 1000ms;
}
| 1000ms |
.line3 {
transition-duration: 2500ms;
}
| 2500ms |
Свойство transition-duration определено в спецификации CSS 3 модуль Transitions (анимационные переходы), применяется к все элементы, и псевдоэлементы :before и :after, и действует на всех визуальный носителях, его значение не наследуется от родительского элемента в иерархии документа, На данный момент свойство поддерживается во всех основных браузерах.
Смотри также:
- transition — свойства анимационного перехода
- transition-property — имя css-свойства, к которому будет применен анимационный переход.
- transition-timing-function — функция зависимости значения css-свойства от времени во течении анимационного перехода
- transition-delay — задержка перед выполнением анимационного перехода
- -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.transitionDuration
Кроссбраузерная совместимость
Internet Explorer
Firefox
Chrome
Safari
Opera
transition duration — это… Что такое transition duration?
Duration (philosophy) — Henri Bergson in 1927. Duration is a theory of time and consciousness posited by the French philosopher Henri Bergson. Bergson sought to improve upon inadequacies he perceived in the philosophy of Herbert Spencer, due, he believed, to Spencer s… … Wikipedia
Power transition theory — The Power transition theory is a theory about the cyclic nature of war, in relation to the power in international relations.cite book|last=Organski|first=AFK|authorlink=A.F.K. Organski|title=World Politics|year=1958|location=New York] cite… … Wikipedia
Pulse duration — In signal processing and telecommunication, the term pulse duration has the following meanings: #In a pulse waveform, the interval between (a) the time, during the first transition, that the pulse amplitude reaches a specified fraction (level) of … Wikipedia
Comparison of layout engines (Cascading Style Sheets) — Cascading Style Sheets CSS Animations Dynamic CSS Comparison of layout engines Comparison of stylesheet languages Internet Explorer box model bug CSS Zen Garden The Zen of CSS Design CSSTidy Style sheet Tableless web design Holy Grail (web… … Wikipedia
Сравнение браузеров (HTML5) — Информация в этой статье или некоторых её разделах устарела. Вы можете помочь проекту … Википедия
длительность фронта импульса — — [Л.Г.Суменко. Англо русский словарь по информационным технологиям. М.: ГП ЦНИИС, 2003.] Тематики информационные технологии в целом EN first transition duration … Справочник технического переводчика
radiation — radiational, adj. /ray dee ay sheuhn/, n. 1. Physics. a. the process in which energy is emitted as particles or waves. b. the complete process in which energy is emitted by one body, transmitted through an intervening medium or space, and… … Universalium
Menopause — Change of Life redirects here. For the Eureka Seven episode, see Change of Life (Eureka Seven). For the Goodies episode, see Change of Life (The Goodies). Menopause Classification and external resources ICD 10 N95.0 ICD 9 … Wikipedia
South Asian arts — Literary, performing, and visual arts of India, Pakistan, Bangladesh, and Sri Lanka. Myths of the popular gods, Vishnu and Shiva, in the Puranas (ancient tales) and the Mahabharata and Ramayana epics, supply material for representational and… … Universalium
china — /chuy neuh/, n. 1. a translucent ceramic material, biscuit fired at a high temperature, its glaze fired at a low temperature. 2. any porcelain ware. 3. plates, cups, saucers, etc., collectively. 4. figurines made of porcelain or ceramic material … Universalium
China — /chuy neuh/, n. 1. People s Republic of, a country in E Asia. 1,221,591,778; 3,691,502 sq. mi. (9,560,990 sq. km). Cap.: Beijing. 2. Republic of. Also called Nationalist China. a republic consisting mainly of the island of Taiwan off the SE coast … Universalium