Временная функция перехода - CSS-хитрости

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

.example ( transition-timing-function: ease-out; )

Эти функции синхронизации обычно называются функциями замедления и могут быть определены с использованием предварительно определенного значения ключевого слова, пошаговой функции или кубической кривой Безье.

Допустимые предопределенные значения ключевых слов:

простота
линейный
легкость в
облегчение
легкость входа
шаг-старт
ступенька

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

Каждое из предопределенных ключевых слов имеет эквивалентное значение кубической кривой Безье или эквивалентное значение ступенчатой функции. Например, следующие два значения функции синхронизации будут эквивалентны друг другу:

.example ( transition-timing-function: ease-out; ) .example-2 ( transition-timing-function: cubic-bezier(0, 0, 0.58, 1); )

Как и следующие два:

.example ( transition-timing-function: step-start; ) .example-2 ( transition-timing-function: steps(1, start); )

Использование шагов () и кривых Безье

steps()Функция позволяет задать интервалы для функции синхронизации. Он принимает один или два параметра, разделенных запятой: положительное целое число и необязательное значение либо startили end. Если второй параметр не включен, по умолчанию используется end.

Чтобы понять пошаговые функции, вот демонстрация, которая используется steps(4, start)для поля слева и steps(4, end)для поля справа (наведите указатель мыши на поле или перезагрузите кадр, чтобы просмотреть переходы):

Посмотрите на эту ручку!

Если startуказано, изменение значений происходит в начале каждого интервала, а endизменение значений происходит в конце каждого интервала.

Подробный обзор значений кривой Безье выходит за рамки этой справочной информации, однако см. Ссылки в разделе связанных ссылок для инструментов, которые наглядно демонстрируют, как работают эти значения.

Для совместимости со всеми поддерживающими браузерами требуются префиксы поставщика, а стандартный синтаксис объявлен последним:

.example ( -webkit-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; )

IE10 (первая поддерживаемая стабильная версия IE transition-timing-function) не требует -ms-префикса.