Создание сайта на CMS WordPress: обучение и хостинг

СВОЙСТВО TRANSITION-TIMING-FUNCTION

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

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


8+

Синтаксис

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit

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

Значение	Описание
linear	Эффект перехода происходит с одинаковой скоростью от начала до конца.
ease	Эффект перехода начинается медленно, затем ускоряется и заканчивается медленно. Это значение по умолчанию.
ease-in	Эффект перехода начинается медленно, затем ускоряется.
ease-out	Эффект перехода заканчивается медленно.
ease-in-out	Похоже на ease, только более плавно.
step-start	Эффект перехода сразу переходит в свое конечное состояние, где она остается до конца.
step-end	Эффект перехода остается в своем начальном состоянии до конца, после чего она сразу переходит в конечное состояние..
steps(int,start\|end)	Определяет пошаговую функцию с двумя параметрами. Первый параметр указывает количество интервалов в функции. Это должно быть положительное целое положительное число. Второй параметр, который является необязательным, является либо начальным значением, либо конечным, и указывает точку, в которой изменение значений происходит в пределах интервала. Если второй параметр не указан, ему присваивается конечное значение.
cubic-bezier(n,n,n,n)	Позволяет задавать свои собственные значения для функции cubic-bezier. Возможные значения - числовые значения от 0 до 1.
initial	Устанавливает значение по умолчанию.
inherit	Унаследует значение свойства от родительского элемента.

Песочница

<div class="block"></div>

HTML

.block{
    width: 100px;
    height: 100px;
    background: blue;
    transition-property: width;
    transition-duration: 3s;
    transition-timing-function: ease-in-out
}

.block:hover {
    width: 200px;
}

CSS

← Перейти к списку свойств