⚡ Кратко
transition + duration-* + ease-*,
движение — scale/rotate/translate/skew, готовые анимации —
animate-*.
Переходы
| Класс | Что анимирует |
|---|
transition | типовой набор: цвет, фон, границу, тень, трансформацию, фильтр |
transition-colors | только цвета |
transition-opacity | прозрачность |
transition-transform | трансформации |
transition-shadow | тени |
transition-all | все свойства — использовать осторожно |
transition-none | отключить |
duration-75 … duration-1000 | длительность в мс |
delay-75 … delay-1000 | задержка |
ease-linear, ease-in, ease-out, ease-in-out | кривая |
Трансформации
| Класс | CSS |
|---|
scale-95, scale-105 | масштаб |
scale-x-150, scale-y-75 | масштаб по оси |
rotate-45, -rotate-12 | поворот |
translate-x-2, -translate-y-1 | сдвиг |
skew-x-6, skew-y-3 | наклон |
origin-center, origin-bottom-left | точка отсчёта |
transform-gpu | подсказка использовать видеокарту |
perspective-normal, rotate-x-45 | трёхмерные трансформации |
will-change-transform | подготовить браузер к анимации |
Анимации
| Класс | Эффект |
|---|
animate-spin | вращение 1с линейно, бесконечно |
animate-ping | расходящаяся волна |
animate-pulse | плавное мигание прозрачностью |
animate-bounce | подпрыгивание |
animate-none | отключить анимацию |
animate-[имя] | своя анимация из темы |
/* src/index.css */
@import "tailwindcss";
@theme {
--animate-fade-up: fade-up 0.25s ease-out;
}
@keyframes fade-up {
from { opacity: 0; transform: translateY(0.5rem); }
to { opacity: 1; transform: translateY(0); }
}
Доступность и состояния
| Вариант | Условие |
|---|
motion-safe: | пользователь не отключал анимации |
motion-reduce: | пользователь просил меньше движения |
starting: | начальные значения при появлении элемента |
group-hover:, peer-checked: | анимация по состоянию соседа или предка |
data-[state=open]: | анимация открытия компонента (урок 21) |
Ориентиры по длительности
| Что | Длительность |
|---|
| Смена цвета кнопки | 150 мс |
| Появление подсказки | 150–200 мс |
| Раскрытие меню | 200 мс |
| Модальное окно | 200–300 мс |
| Боковая панель | 300 мс |
| Что угодно дольше 400 мс | почти всегда ошибка |