Анимации и переходы

.button { transition: transform 150ms ease, background-color 150ms; }
.button:hover { transform: translateY(-1px); }

@keyframes fade-in { from { opacity: 0 } to { opacity: 1 } }
.toast { animation: fade-in 200ms ease-out; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

Что важно знать

• Дёшево анимировать transform и opacity — они обрабатываются на этапе композиции, без пересчёта раскладки. Анимация width, top, margin вызывает layout на каждом кадре — рывки.
• will-change — подсказка браузеру вынести элемент в отдельный слой; использовать точечно.
• Для сложных последовательностей — Web Animations API или библиотеки (Motion).
• Уважать настройку «уменьшить движение» у пользователя.