transition-duration: длительность перехода свойства

Назначение

transition-duration задаёт время, за которое анимируемое свойство переходит от старого значения к новому.

Как это работает

Само по себе время не создаёт изменение: нужен другой целевой стиль, например при hover или focus. Если перечислены несколько свойств, длительности сопоставляются со списком по правилам CSS.

Пример

<style>
button{padding:12px 18px;background:#fff;border:2px solid #11694e;transition-property:background-color;transition-duration:.2s}button:hover,button:focus-visible{background:#cfe7da}@media(prefers-reduced-motion:reduce){button{transition-duration:0s}}
</style>
<button type="button">Наведите указатель или нажмите Tab</button>

Что должно получиться

Изменение фона занимает две десятых секунды при обычных настройках. В режиме сокращённого движения переход становится мгновенным, но новое состояние остаётся видимым.

Граница применения и частая ошибка

Долгие переходы могут замедлять ощущение реакции интерфейса. Учитывайте prefers-reduced-motion и не делайте анимацию единственным способом понять изменение состояния.

Самостоятельная проверка

Сравните .15s и 1s у одной кнопки мышью и клавиатурой. Затем включите сокращение движения в настройках системы и проверьте отключение длительности.

HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.

Связанные материалы

• Каскад и специфичность
• Модель размеров
• Отладка стилей