Функция времени перехода

Классы ease-* задают transition-timing-function — кривую, по которой переход распределяет изменение во времени. Берите их, когда движение должно начинаться мягко, останавливаться мягко или идти равномерно.

Пример

Наведите указатель на дорожку или перейдите на неё клавишей Tab. Все точки идут 0,5 с (duration-slow); подпись — класс кривой.

HTML

<div class="flex flex-col gap-3">
  <div class="flex flex-col gap-1">
    <div class="demo-motion-track p-1 radius-rounded bg-surface-container border border-outline-variant" tabindex="0" aria-label="Дорожка с образцом перехода">
      <div class="demo-motion-dot w-c6 h-c6 radius-rounded bg-primary duration-slow ease-linear"></div>
    </div>
    <code class="text-1/2 color-on-surface-variant">ease-linear</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="demo-motion-track p-1 radius-rounded bg-surface-container border border-outline-variant" tabindex="0" aria-label="Дорожка с образцом перехода">
      <div class="demo-motion-dot w-c6 h-c6 radius-rounded bg-primary duration-slow ease-in"></div>
    </div>
    <code class="text-1/2 color-on-surface-variant">ease-in</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="demo-motion-track p-1 radius-rounded bg-surface-container border border-outline-variant" tabindex="0" aria-label="Дорожка с образцом перехода">
      <div class="demo-motion-dot w-c6 h-c6 radius-rounded bg-primary duration-slow ease-out"></div>
    </div>
    <code class="text-1/2 color-on-surface-variant">ease-out</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="demo-motion-track p-1 radius-rounded bg-surface-container border border-outline-variant" tabindex="0" aria-label="Дорожка с образцом перехода">
      <div class="demo-motion-dot w-c6 h-c6 radius-rounded bg-primary duration-slow ease-in-out"></div>
    </div>
    <code class="text-1/2 color-on-surface-variant">ease-in-out</code>
  </div>
</div>

CSS

.demo-motion-track {
  container-type: inline-size;
  cursor: pointer;
}

.demo-motion-track:hover .demo-motion-dot,
.demo-motion-track:focus-visible .demo-motion-dot {
  transform: translateX(calc(100cqi - 100%));
}

Классы

Класс	CSS	Значения
`ease-linear`	`transition-timing-function: linear`	—
`ease-in`	`transition-timing-function: cubic-bezier(0.4, 0, 1, 1)`	—
`ease-out`	`transition-timing-function: cubic-bezier(0, 0, 0.2, 1)`	—
`ease-in-out`	`transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)`	—

Условия (что это): ширина экрана — нет; состояния — нет.

Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.

Применение

Выбор кривой

Класс	Когда брать
`ease-linear`	равномерное изменение: индикатор хода, вращение
`ease-in`	элемент уходит: разгон без торможения
`ease-out`	элемент приходит: быстрый старт, мягкая остановка
`ease-in-out`	перемещение на месте: мягко в начале и в конце

HTML

<div class="duration-normal ease-out hover:shadow-3">Карточка</div>

Кривые темы

Классы transition-* и класс animation используют кривые темы, а не эти классы: --sf-ease-move и --sf-animation. Для своих правил тема даёт ещё --sf-ease-enter (появление) и --sf-ease-exit (исчезновение); классов для них нет, их подключают в CSS проекта.

CSS

.my-drawer {
  transition: transform var(--sf-duration-normal) var(--sf-ease-enter);
}

Ограничения

ease-* и классы transition-* задают одно свойство с одинаковой специфичностью; итог зависит от порядка таблиц стилей. Не ставьте их на один элемент.
Кривая действует только на переходы. На CSS-анимацию класса animation она не влияет.
У семейства нет префиксов ширины экрана и состояния.

Навигация

Главное

Документация

Содержание