Руководство по CSS

CSS @правила (RULES)

Полный список свойств CSS

Атрибут unicode-bidi в CSS Атрибут transition-property в CSS3

Метод использования и примеры атрибута CSS3 transition-timing-function

Атрибут CSS3 transition-timing-function определяет скорость перехода эффекта. Этот атрибут позволяет изменять скорость продолжительности перехода.

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

Значение по умолчанию:	ease
Применяется к:	Все элементы::before и::after Псевдоэлементы
Ингерит:	Нет
Анимация:	Нет.См. также Атрибут анимации.
Версия:	Новая функция CSS3
JavaScript-синтаксис:	объект.style.transitionTimingFunction="ease-in"

Синтаксис использования transition-timing-function

Синтаксис этого атрибута следующий:

transition-timing-function:　linear　|　ease　|　ease-in　|　ease-out　|　ease-in-out　|　cubic-bezier(n,n,n,n)　|　initial　|　inherit

Ниже приведен пример того, как использовать атрибут transition-timing-function.

Пример

button　{
　　　　background:　#fd7c2a;
　　　　/*　For　Safari　3.0+　*/
　　　　-webkit-transition-property:　background;
　　　　-webkit-transition-duration:　2s;
　　　　　　-webkit-transition-timing-function:　linear;
　　　　
　　　　transition-property:　background;
　　　　transition-duration:　2s;
　　　　　　transition-timing-function:　linear;
}
button:hover　{
　　　　background:　#3cc16e;
}

Проверьте, как это выглядит‹/›

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

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

Значения	Описание
linear	Указывает, что переход происходит с постоянной скоростью от начального состояния к конечному.
ease	Похож на ease-in-out, хотя он ускоряется быстрее в начале и уже начинает замедляться附近 середины.
ease-in	Указывает, что переход начинается медленно, затем ускоряется, достигает конечного состояния и внезапно останавливается.
ease-out	Указывает, что переход начинается быстро, а затем медленно приближается к конечному состоянию.
ease-in-out	Указывает, что переход к конечному состоянию начинается медленно, затем ускоряется, а затем замедляется.
cubic-bezier(n,n,n,n)	Определяет кривую三次 Бэзиля. Также известна как кривая скорости. Возможные значения - числа от 0 до 1.
initial	Установить этот параметр в его значение по умолчанию.
inherit	Если указано, то связанный элемент использует значение свойства transition-timing-function родительского элемента.

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

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

	Firefox 4+ ^-moz-, 16 + Google Chrome 4+ ^-webkit-, 26 + Internet Explorer 10+ Apple Safari 3.1+ ^-webkit-, 6.1+ Opera 10.5+ ^-o-, 12.1+

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

См. также следующие руководства:CSS3 Transitions.

См. также соответствующие свойства:transition,transition-delay,transition-property,transition-duration.

Атрибут unicode-bidi в CSS Атрибут transition-property в CSS3