transition-durationСвойство, как правило , используется в качестве части transitionстенографии, используется для определения длительности заданного перехода. То есть время, необходимое целевому элементу для перехода между двумя определенными состояниями.
.example ( transition-duration: 3s; )Значение может быть одним из следующих:
- Действительное значение времени (определяется в секундах или миллисекундах)
- Список значений времени, разделенных запятыми, для перехода нескольких свойств в один элемент.
Значение по умолчанию для transition-duration- это 0sозначает, что переход не произойдет, и изменение свойства произойдет немедленно, даже если определены другие свойства, связанные с переходом. Значение времени может быть выражено в виде десятичного числа для более точного отсчета времени, отрицательные значения не допускаются.
Следующий код CodePen показывает эффект наведения курсора на поле, в котором используется transition-durationзначение 1sдля постепенного изменения цвета фона:
Для совместимости со всеми поддерживающими браузерами требуются префиксы поставщика, а стандартный синтаксис объявлен последним:
.example ( -webkit-transition-duration: 700ms; -moz-transition-duration: 700ms; -o-transition-duration: 700ms; transition-duration: 700ms; )IE10 (первая поддерживаемая стабильная версия IE transition-duration) не требует -ms-префикса.
Поддержка браузера
| Хром | Сафари | Fire Fox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Работает | Работает | 4+ | 10.5+ | 10+ | 2.1+ | 3.2+ |