CSS-свойство transition-timing-function указывает, как рассчитываются промежуточные значения CSS-свойств, на которые влияет эффект перехода transition.

Значение по умолчанию: ease
Применяется к: Все элементы, ::before и ::after псевдо-элементы
Наследование: Нет
Анимирование: Нет. Анимируемые свойства
Версия: Новый в CSS3

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

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;
    /* Standard syntax */
    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) Определяет кубическую кривую Безье. Это также известно как кривая скорости. Указываются 4 значения — числовые значения от 0 до 1.
initial Устанавливает это свойство в значение по умолчанию.
inherit Если указан, связанный элемент принимает вычисленное значение своего родительского элемента transition-timing-function.

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

Свойство transition-timing-function поддерживается во всех основных браузерах.

Читайте также

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.