Transition duration – transition-duration — Веб-технологии для разработчиков

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

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

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 для велечин типа <длительность>. Отрицательные значения интерпретируются как нулевые. Данное свойство может принимать несколько значений, разделенных запятыми, и тогда они будут соответствовать анимации для различных css-свойств, в том порядке, в котором они установлены в transition-property.

Допустимые значения

  • длительность - любое не отрицательное значение, в одной из следующих единиц измерений:
    • 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 - задержка перед выполнением анимационного перехода

Краткое описание

длительность анимационного перехода

Синтаксис:

&lt;длительность&gt; [, &lt;длительность&gt;]*

По умолчанию:

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

  • Отправить ответ

    avatar
      Подписаться  
    Уведомление о