Свойство transition-timing-function в CSS

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

Свойство transition-timing-function определяет кривую скорости эффекта перехода.

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

См. также:

Уроки CSS:Преобразования CSS

Руководство по HTML DOM:Свойство transitionTimingFunction

Пример

Пример 1

Эффект перехода с одинаковой скоростью от начала до конца:

div
{
transition-timing-function: linear;
}

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

Грамматика CSS

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

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

Значение Описание
linear Определите эффект перехода, начинающийся и заканчивающийся с одинаковой скоростью (равен cubic-bezier(0,0,1,1)).
ease Определите эффект перехода, начинающийся медленно, затем ускоряющийся, затем заканчивающийся медленно (cubic-bezier(0.25,0.1,0.25,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) Определите свои значения в функции cubic-bezier. Возможные значения - это числовые значения в диапазоне от 0 до 1.

подсказка:пожалуйста, тестируйте различные значения в примерах, чтобы лучше понять их принцип работы.

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

по умолчанию: ease
наследование: нет
версия: CSS3
JavaScript синтаксис: объект.style.transitionTimingFunction="linear"

более сложные примеры

пример 2

Чтобы лучше понять различные значения функций, посмотрите на пять различных div элементов с пятью различными значениями:

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

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

пример 3

Как и в предыдущем примере, но скорость кривой определяются с помощью cubic-bezier:

#div1 {transition-timing-function: cubic-bezier(0,0,1,1);}
#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

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

поддержка браузерами

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

числа с префиксами -webkit-, -moz- или -o- указывают на первую версию, использующую префикс.

Chrome IE / Edge Firefox Safari Opera
26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-