Урок 01

Анимации: transitions и keyframes

Зачем анимации

Что даёт:

Обратная связь — пользователь видит, что кнопка нажата.
Ориентация — куда переходит.
Иерархия — что важнее.
Вовлечение — сайт живой.

Что стоит:

Производительность — если не оптимизировать.
Доступность — у некоторых нарушения вестибулярного аппарата.

Правило: анимации улучшают UX, но не заменяют функциональность.

`transition`

Плавное изменение свойств при изменении состояния.

.button {
    background: blue;
    transition: background 0.2s ease;
}

.button:hover {
    background: red;
}

Что происходит: цвет плавно меняется за 0.2 секунды.

Синтаксис

transition: <property> <duration> <timing-function> <delay>;
transition: background 0.3s ease-in-out 0.1s;

Что означает:

property — что анимируется.
duration — сколько длится.
timing-function — как ускоряется.
delay — задержка.

Несколько свойств

Перечисление:

transition:
    background 0.2s ease,
    transform 0.3s ease,
    box-shadow 0.2s ease;

Через all:

transition: all 0.3s ease;

⚠️ all — плохо: ловит непредвиденные свойства, тормозит.

Правило: перечислять конкретные свойства.

Timing functions

transition-timing-function: ease;         /* default */
transition-timing-function: linear;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-timing-function: steps(4, end);

Что означает:

ease — мягкий старт, мягкий конец.
linear — равномерно.
ease-in — медленный старт.
ease-out — медленный конец.
ease-in-out — оба.

Практические:

Появление — ease-out.
Исчезновение — ease-in.
UI-элементы — cubic-bezier(0.4, 0, 0.2, 1) (Material).
Overshoot — cubic-bezier(0.34, 1.56, 0.64, 1).

Длительность

Рекомендации:

Микро (hover) — 0.1–0.2s.
Стандарт — 0.2–0.3s.
Появление/исчезновение — 0.3–0.4s.
Крупные элементы — 0.4–0.6s.
Больше 1s — почти никогда.

Правило: короткие анимации = ощущение скорости.

`@keyframes`

Многошаговая анимация:

@keyframes pulse {
    0%   { opacity: 1; }
    50%  { opacity: 0.5; }
    100% { opacity: 1; }
}

.dot {
    animation: pulse 2s ease-in-out infinite;
}

Синтаксис `animation`

animation: <name> <duration> <timing> <delay> <iteration> <direction> <fill-mode> <play-state>;
animation: pulse 2s ease-in-out 0s infinite normal none running;

Основные:

animation-name: pulse;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;   /* или число */
animation-direction: normal;              /* reverse, alternate, alternate-reverse */
animation-fill-mode: none;                /* forwards, backwards, both */
animation-delay: 0s;
animation-play-state: running;            /* paused */

Полезные анимации

Fade in:

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

Slide up:

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

Scale in:

@keyframes scaleIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

Spin:

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loader {
    animation: spin 1s linear infinite;
}

Shake:

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-5px); }
    75%      { transform: translateX(5px); }
}

.input--error {
    animation: shake 0.3s;
}

Skeleton:

@keyframes skeleton {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton 1.5s infinite;
    border-radius: 4px;
}

`transform`

Основные трансформации:

transform: translateX(20px);
transform: translateY(-10px);
transform: translate(20px, -10px);
transform: scale(1.2);
transform: scale(1.2, 0.8);
transform: rotate(45deg);
transform: skew(10deg, 5deg);

Комбинация:

transform: translate(-50%, -50%) rotate(45deg) scale(1.1);

Правило: translate → rotate → scale.

Практика: карточка с hover

.card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

Практика: кнопка

.btn {
    transition: background 0.15s ease, transform 0.1s ease;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn:active {
    transform: translateY(0) scale(0.98);
}

Производительность

Что быстро (GPU):

transform
opacity

Что медленно (reflow):

width, height
top, left, right, bottom
margin, padding
font-size

Что средне (paint):

background
box-shadow
border-color
color

Правило: анимировать transform и opacity. Остальное — через них.

Плохая vs хорошая

Плохо:

.box {
    transition: left 0.3s;
    left: 0;
}

.box:hover {
    left: 100px;   /* reflow */
}

Хорошо:

.box {
    transition: transform 0.3s;
    transform: translateX(0);
}

.box:hover {
    transform: translateX(100px);   /* GPU */
}

`prefers-reduced-motion`

Обязательно:

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

Что даёт: уважение к пользователям с вестибулярными нарушениями.

Частые ошибки

1. transition: all:

transition: all 0.3s;

Решение: конкретные свойства.

2. Долгие анимации:

transition: 1s ease;

Решение: 0.15–0.3s.

3. Анимация top / left:

Reflow, тормозит

Решение: transform: translate().

4. Нет prefers-reduced-motion:

Проблемы для вестибулярных

Решение: добавить.

5. animation без duration:

animation: pulse;   /* 0s по умолчанию */

Решение: всегда указывать duration.

6. infinite без причины:

Раздражает

Решение: только для loader/pulse.

7. Анимация при hover на мобильных:

hover «залипает»

Решение: @media (hover: hover).

8. Забыть forwards:

Возврат в исходное состояние

Решение: animation-fill-mode: forwards.

Итог

transition — плавное изменение.
@keyframes — многошаговая.
Timing: ease, ease-out, ease-in-out.
Duration: 0.15–0.3s.
transform + opacity — быстрые.
translate, scale, rotate — GPU.
prefers-reduced-motion — обязательно.
Не transition: all.
Не анимировать top, left.
Использовать currentColor.

Дальше — изображения: оптимизация, lazy-load, responsive.