Задержка перехода

Классы delay-* задают transition-delay — паузу перед началом перехода. Берите их, чтобы элементы менялись по очереди или чтобы короткое случайное наведение указателя не запускало изменение.

Пример

Шкала

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

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-normal delay-0"></div>
    </div>
    <code class="text-1/2 color-on-surface-variant">delay-0</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 delay-3"></div>
    </div>
    <code class="text-1/2 color-on-surface-variant">delay-3</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 delay-6"></div>
    </div>
    <code class="text-1/2 color-on-surface-variant">delay-6</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 delay-8"></div>
    </div>
    <code class="text-1/2 color-on-surface-variant">delay-8</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%));
}

Ширина экрана

С префиксом ширины класс действует от указанной ширины и шире. Меняйте ширину окна просмотра: на узком экране точка трогается через секунду, начиная с ширины md — сразу.

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-normal delay-8 md:delay-0"></div>
    </div>
    <code class="text-1/2 color-on-surface-variant">delay-8 md:delay-0</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	Значения
`delay-1`	`transition-delay: 75ms`	—
`delay-2`	`transition-delay: 100ms`	—
`delay-3`	`transition-delay: 150ms`	—
`delay-4`	`transition-delay: 200ms`	—
`delay-5`	`transition-delay: 300ms`	—
`delay-6`	`transition-delay: 500ms`	—
`delay-7`	`transition-delay: 700ms`	—
`delay-8`	`transition-delay: 1s`	—
`delay-9`	`transition-delay: 2s`	—
`delay-0`	`transition-delay: 0s`	—

Условия (что это): ширина экрана — sm:, md:, lg:, xl:, xxl:; состояния — нет. Например: sm:delay-1.

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

Применение

Выбор задержки

Шкала идёт от delay-1 (75 мс) до delay-9 (2 с); delay-0 убирает задержку — например, с префиксом ширины, как в примере выше. Значения заданы числами, а не токенами темы. Для отклика на наведение хватает delay-1 … delay-3; delay-6 и больше подходят для последовательностей и подсказок, которые не должны всплывать от случайного движения указателя.

Появление по очереди

Одинаковый переход с растущей задержкой выстраивает элементы в последовательность:

HTML

<li class="duration-normal delay-0">Первый</li>
<li class="duration-normal delay-2">Второй</li>
<li class="duration-normal delay-4">Третий</li>

Задержка совместима с классами transition-*, duration-* и ease-*: она задаёт отдельное свойство.

Ограничения

Задержка действует в обе стороны: элемент с delay-8 и начинает, и отменяет изменение через секунду. Долгая задержка на отклике кнопки или ссылки выглядит как зависание.
Классы меняют только переходы, а не CSS-анимацию класса animation.
Префиксов состояния у семейства нет.

Навигация

Главное

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

Содержание

Задержка перехода

Пример

Шкала

Ширина экрана

Классы

Применение

Выбор задержки

Появление по очереди

Ограничения

См. также

Settings