Свойство transition-duration

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

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

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

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

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

.line1 {
transition-duration: 500ms;
}

.line2 {
transition-duration: 1000ms;
}

.line3 {
transition-duration: 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 - задержка перед выполнением анимационного перехода

• Спецификация стандарта CSS 3