Урок 21 · CSS

Transition там, где состояние и так меняется

Переход смягчает смену цвета или фона. Он не заменяет сам эффект нажатия и не должен мешать чтению.

Почему это следующий шаг

Тема переключает цвета сразу. Короткий переход делает смену кнопки спокойнее.

Как сделать

transition пиши на свойство, которое реально меняется: background-color, color, transform. Длительность 150–250 мс для интерфейса обычно достаточна. Не анимируй width всей страницы и не ставь переход на всё через all без нужды. Если у человека включено уменьшенное движение, отключи переход в prefers-reduced-motion.

.button { transition: background-color 180ms ease; }
@media (prefers-reduced-motion: reduce) {
  .button { transition: none; }
}

Что проверить

• Кнопка меняет фон плавно и не дёргает соседей.
• Переход короче половины секунды.
• При reduced motion смена мгновенная.