Продолжительность перехода

Классы duration-* задают transition-duration по одному из трёх токенов времени. Берите их, когда элемент должен плавно менять вид при наведении, фокусе или смене класса, и скорость этого изменения важна.

Пример

Наведите указатель на дорожку или перейдите на неё клавишей Tab: точка проходит одинаковый путь, меняется только длительность. Подпись — класс на точке.

<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-fast"></div>
    </div>
    <code class="text-1/2 color-on-surface-variant">duration-fast</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-normal"></div>
    </div>
    <code class="text-1/2 color-on-surface-variant">duration-normal</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"></div>
    </div>
    <code class="text-1/2 color-on-surface-variant">duration-slow</code>
  </div>
</div>

.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 выпуска и обновляются вместе с ним.

Переменные

Классы читают эти токены темы. Изменённый токен меняет все места, где он используется, — классы, компоненты и тему; задайте его в теме проекта, а не на отдельном элементе. Все токены — на странице Все токены.

Применение

Выбор длительности

Быстрый переход подходит для отклика на наведение и нажатие, обычный — для смены цвета и тени, медленный — для крупных перемещений.

Сочетание с функцией времени и задержкой

Без класса transition-* переход охватывает все свойства (значение transition-property по умолчанию — all). Кривую и задержку добавляют классы ease-* и delay-*:

<a class="duration-fast ease-out hover:color-primary" href="#">Ссылка</a>

Длительность у классов transition-*

Классы свойства перехода сами задают длительность — токен --sf-duration-normal. Чтобы изменить её для такого элемента, переопределите токен на нём или на его предке:

.my-panel {
  --sf-duration-normal: var(--sf-duration-slow);
}

Ограничения

• duration-* и классы transition-* задают одно свойство с одинаковой специфичностью. Какой класс победит, решает порядок таблиц стилей, поэтому не ставьте их на один элемент — используйте токен, как показано выше.
• Классы не учитывают системную настройку уменьшения движения (prefers-reduced-motion).
• У семейства нет префиксов ширины экрана и состояния.

См. также

• Общее свойство перехода
• Функция времени перехода
• Задержка перехода
• Продолжительность анимации