Свойство Style transitionTimingFunction

Определение и использование

transitionTimingFunction Атрибут определяет кривую скорости эффекта транзита.

Этот атрибут позволяет изменять скорость эффекта транзита в течение его продолжительности.

См. также:

CSS справочник:Атрибут transition-timing-function

Пример

Измените кривую скорости транзита:

document.getElementById("myDIV").style.transitionTimingFunction = "linear";

Попробуйте сами

Грамматика

Верните атрибут transitionTimingFunction:

объект.style.transitionTimingFunction

Установите атрибут transitionTimingFunction:

объект.style.transitionTimingFunction = 
"ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier()|initial|inherit"

Значение атрибута

Значение Описание
ease

Значение по умолчанию. Определяет эффект транзита, который медленно начинается, затем быстро, а затем медленно заканчивается.

Эквивалентно: cubic-bezier(0.25, 0.1, 0.25, 1) .
linear

Определяет эффект транзита, который имеет одинаковую скорость от начала до конца.

Эквивалентно: cubic-bezier(0, 0, 1, 1) .
ease-in

Определяет эффект транзита, который медленно начинается.

Эквивалентно: cubic-bezier(0.42, 0, 1, 1) .
ease-out

Определяет эффект транзита, который медленно заканчивается.

Эквивалентно: cubic-bezier(0, 0, 0.58, 1) .
ease-in-out

Определяет эффект транзита, который медленно начинается и заканчивается.

Эквивалентно: cubic-bezier(0.42, 0, 0.58, 1) .
cubic-bezier(n, n, n, n)

Определите свои значения в三次Bezier функции.

Возможные значения - это значения от 0 до 1.
initial Sets this property to its default value. См. initial.
inherit Инherits this property from its parent element. См. inherit.

Технические детали

Значение по умолчанию: ease
Возвратное значение: Строка, представляющая Атрибут transition-timing-function.
Версия CSS: CSS3

Поддержка браузеров

Таблица цифр указывает на версию браузера,首个完全支持该属性的版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
26.0 10.0 16.0 6.1 12.1