Свойство transition: плавные изменения
Как плавно менять состояние элемента и уважать настройку уменьшенного движения.
Как это работает
transition задаёт плавный переход между старым и новым значением CSS-свойства. Сам переход не создаёт новое состояние: его должен вызвать hover, focus, изменение класса или другое событие. Объявление удобно размещать в обычном состоянии, чтобы плавным было и возвращение.
Указывайте конкретные свойства вместо all. Так случайное изменение размера или позиции не начнёт неожиданно анимироваться. Длительность должна помогать считывать состояние, а не задерживать взаимодействие. Для пользователей с reduced motion отключайте необязательное движение.
Пример в интерфейсе
button { padding: 12px 18px; border: 0; border-radius: 8px; background: #11694e; color: white; transition: background-color .18s ease; }
button:hover, button:focus-visible { background: #084531; }
@media (prefers-reduced-motion: reduce) { button { transition: none; } }Значения и поведение
| Значение или правило | Результат |
|---|---|
| transition-property | Какие свойства переходят плавно. |
| transition-duration | Длительность перехода. |
| transition-timing-function | Характер изменения скорости. |
| transition-delay | Задержка перед стартом. |
На что обратить внимание
Проверьте на практике
Наведите курсор на кнопку, затем переведите фокус клавишей Tab. Оба способа взаимодействия должны давать заметное состояние.
Связанные темы: background, color.