Метод использования и примеры для свойства transition-duration CSS3

Свойство transition-duration CSS определяет количество секунд или миллисекунд, необходимых для завершения анимации перехода.

В таблице приведено описание использования и историю версий этого свойства, а также синтаксис использования этого свойства в скриптах на JavaScript.

Использование грамматики transition-duration

Грамматика этого свойства такая:

transition-duration:　time　|　initial　|　inherit

Ниже приведен пример того, как использовать свойство transition-duration.

button　{
　　　　background:　#fd7c2a;
　　　　/*　Для　Safari　3.0+　*/
　　　　-webkit-transition-property:　background;
　　　　-webkit-transition-duration:　2s;
　　　　
　　　　transition-property:　background;
　　　　transition-duration:　2s;
}
button:hover　{
　　　　background:　#3cc16e;
}

Значение свойства

В таблице ниже описаны значения этого свойства.

Совместимость браузеров

Совместимость браузеров для свойства transition-duration, числа в таблице представляют собой минимальную версию браузера, поддерживающего это свойство; все основные браузеры поддерживают это свойство.

Дополнительное чтение

Пожалуйста, обратитесь к следующим руководствам:CSS3 Transitions.

Связанные свойства:transition,transition-delay,transition-property,transition-timing-function.