`transition` плавно меняет свойства между состояниями, а `@keyframes` описывает самостоятельную анимацию. Разбираем duration, easing, iteration, fill-mode, производительные `transform`/`opacity` и `prefers-reduced-motion`.
Переходы (transition)
Свойство
Зачем нужно
Мини-пример
transition
Шорткат всех подсвойств: property duration timing-function delay
transition: transform 180ms ease 0s;
transition-property
Что анимировать (или all)
transition-property: transform, opacity;
transition-duration
Как долго (без неё перехода нет)
transition-duration: 180ms;
transition-timing-function
Кривая скорости (easing)
transition-timing-function: ease-in-out;
transition-delay
Задержка перед стартом
transition-delay: 100ms;
Кривые скорости (timing-function)
Значение
Поведение
linear
Постоянная скорость, механично
ease
По умолчанию: быстрый старт, замедление к концу
ease-in
Медленный старт, ускорение
ease-out
Быстрый старт, плавное торможение
ease-in-out
Плавный старт и плавное торможение
cubic-bezier(a,b,c,d)
Своя кривая, можно с «отскоком»
steps(n)
Дискретные шаги (для покадровых спрайтов)
Анимации (@keyframes + animation)
Свойство
Зачем нужно
Мини-пример
@keyframes
Описание кадров (from/to или 0%…100%)
@keyframes fade-up { from{…} to{…} }
animation
Шорткат: name duration timing iteration fill
animation: fade-up 500ms ease-out both;
animation-name
Имя keyframes
animation-name: fade-up;
animation-duration
Длительность одного цикла
animation-duration: 500ms;
animation-timing-function
Кривая скорости анимации
animation-timing-function: ease-out;
animation-iteration-count
Число повторов (infinite — цикл)
animation-iteration-count: infinite;
animation-fill-mode
Стиль до/после анимации
animation-fill-mode: both;
animation-delay
Задержка перед стартом
animation-delay: 200ms;
animation-direction
Направление (alternate — туда-обратно)
animation-direction: alternate;
Производительные свойства для движения
Свойство
Зачем нужно
Мини-пример
transform
Дешёвое перемещение/масштаб/поворот
transform: translateY(-4px);
opacity
Дешёвое появление/исчезание
opacity: 0;
Доступность
Запрос
Зачем нужен
@media (prefers-reduced-motion: reduce)
Уменьшить/отключить движение по системной настройке (урок 38)