Свойство -o-transition-duration

Свойство -o-transition-duration определяет длительность анимированного перехода для заданного css-свойства из одного значения в другое. Значение -o-transition-duration, по умолчанию, равняется 0 (анимация отсутствует, заданное css-свойство изменяется мнгновенно) и не наследуется от родительского элемента. Длительность перехода может задаваться любым доступным способом в соответствии со стандартом CSS 3 для велечин типа <длительность>. Отрицательные значения интерпретируются как нулевые. Данное свойство может принимать несколько значений, разделенных запятыми, и тогда они будут соответствовать анимации для различных css-свойств, в том порядке, в котором они установлены в -o-transition-property.

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

  • длительность - любое не отрицательное значение, в одной из следующих единиц измерений:
    • ms - микросекунды
    • s  - секунды

Примеры использования

В данном примере будет установлена различная длительность анимации. Будут меняться свойства padding-left от 0 до 100% и opacity - от 1.0 до 0

CSS Пример
.line1 {
-o-transition-duration: 500ms;
}
500ms
.line2 {
-o-transition-duration: 1000ms;
}
1000ms
.line3 {
-o-transition-duration: 2500ms;
}
2500ms

 

Свойство -o-transition-duration относится к спецификации CSS, применяется к все элементы, и псевдоэлементы :before и :after, и действует на всех визуальный носителях, его значение не наследуется от родительского элемента в иерархии документа, Является расширением движка Presto (браузер Opera), и не совместимо с другими браузерами.

Смотри также:

  • transition - свойства анимационного перехода
  • transition-property - имя css-свойства, к которому будет применен анимационный переход.
  • transition-duration - длительность анимационного перехода
  • 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-timing-function - функция зависимости значения css-свойства от времени во течении анимационного перехода
  • -o-transition-delay - задержка перед выполнением анимационного перехода

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

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

Синтаксис:

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

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

0

Применяется к:

все элементы, и псевдоэлементы :before и :after

Наследование:

не наследуется

Тип носителя:

визуальный

Объектная модель документа (DOM):

[элемент].style['-o-transition-duration']

Кроссбраузерная совместимость

Internet Explorer

не поддерживается

Firefox

не поддерживается

Chrome

не поддерживается

Safari

не поддерживается

Opera

8.5+