transition-timing-function

Утилиты для управления функцией ускорения CSS-переходов.

Class Styles

Class	Styles
`ease-linear`	`transition-timing-function: linear;`
`ease-in`	`transition-timing-function: var(--ease-in); /* cubic-bezier(0.4, 0, 1, 1) */`
`ease-out`	`transition-timing-function: var(--ease-out); /* cubic-bezier(0, 0, 0.2, 1) */`
`ease-in-out`	`transition-timing-function: var(--ease-in-out); /* cubic-bezier(0.4, 0, 0.2, 1) */`
`ease-initial`	`transition-timing-function: initial;`
`ease-(<custom-property>)`	`transition-timing-function: var(<custom-property>);`
`ease-[<value>]`	`transition-timing-function: <value>;`

ease-linear

transition-timing-function: linear;

ease-in

transition-timing-function: var(--ease-in); /* cubic-bezier(0.4, 0, 1, 1) */

ease-out

transition-timing-function: var(--ease-out); /* cubic-bezier(0, 0, 0.2, 1) */

ease-in-out

transition-timing-function: var(--ease-in-out); /* cubic-bezier(0.4, 0, 0.2, 1) */

ease-initial

transition-timing-function: initial;

ease-(<custom-property>)

transition-timing-function: var(<custom-property>);

ease-[<value>]

transition-timing-function: <value>;

Примеры

Базовый пример

Используйте утилиты типа ease-in и ease-out, чтобы управлять кривой ускорения перехода элемента:

Наведите курсор на каждую кнопку, чтобы увидеть ожидаемое поведение

ease-in

ease-out

ease-in-out

<button class="duration-300 ease-in ...">Кнопка A</button><button class="duration-300 ease-out ...">Кнопка B</button><button class="duration-300 ease-in-out ...">Кнопка C</button>

Использование пользовательского значения

Используйте синтаксис ease-[<value>] , чтобы задать transition timing function на основе полностью пользовательского значения:

<button class="ease-[cubic-bezier(0.95,0.05,0.795,0.035)] ...">  <!-- ... --></button>

Для переменных CSS вы также можете использовать синтаксис: ease-(<custom-property>)

<button class="ease-(--my-ease) ...">  <!-- ... --></button>

Это просто сокращение, ease-[var(<custom-property>)] которое автоматически добавляет функцию var().

Адаптивный дизайн

Префикс a transition-timing-function утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:

<button class="ease-out md:ease-in ...">  <!-- ... --></button>

Подробнее об использовании вариантов читайте в документации по вариантам.

Кастомизация вашей темы

Используйте переменные темы --ease-* для настройки утилит transition timing function в вашем проекте:

@theme {  --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035); }

Теперь утилиту ease-in-expo можно использовать в вашей разметке:

<button class="ease-in-expo">  <!-- ... --></button>

Подробнее о настройке темы читайте в документации темы.