Анимации, переходы и трансформации

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ

Разработчику Аналитику Тестировщику
Архитектору Инженеру

В этой главе: плавные переходы (transition), циклические @keyframes (animation), геометрия (transform, perspective), визуальный фон (linear-gradient), слои (opacity, position), выравнивание в баннерах (justify-content, gap) и готовые рецепты эффектов.

Раздел	О чём
Интерактив	Демо transition
`animation`	`@keyframes`, `infinite`, `ease-in-out`, `animation-delay`
`transform`	`translateX` / `translateY`, `rotate`, `scale`, 3D
`transition`	Длительность, easing, `transition: all`
Градиенты	Фон баннера, shimmer
Слои	`opacity`, стек слайдов
Позиция	`relative` / `absolute`, карусель, центрирование
Макет в баннере	Flex, `gap`, устаревший `float`
Баннеры	Смена слайдов, декор
Каталог анимаций	Готовые `@keyframes`

Справочник по синтаксису всех свойств — § Справочник по CSS. Разметка hero-карусели с JS — Промо-карусель.

Анимации и трансформации

Play ITЗагрузка интерактивного демо…

Эти свойства позволяют делать веб-страницу динамичной — добавлять движение, плавные переходы и визуальные эффекты. После теории закрепите готовым кодом — CSS-анимации — готовые эффекты — fade in, спиннер, shimmer, hover-кнопка с построчным разбором.

Связанный пример

Смена слайдов в промо-баннере чаще всего строится на transition: opacity и отдельных @keyframes для декора.

Готовые файлы с разбором — CSS-анимации — готовые эффекты.

Анимация inline-<svg> (пульс, вращение) — SVG — рисунки кодом, раздел "Анимация".

Разметка, ширина контейнера и связка с JavaScript — в разделе Промо-карусель и в главе Виджеты интерфейса на ванильном JavaScript.

`animation` в CSS

animation — это составное свойство CSS, которое применяет заранее определённую анимацию к элементу. Анимация описывается с помощью правила @keyframes, где задаются ключевые моменты (кадры) изменения стилей во времени.

Синтаксис

Базовый синтаксис:

selector {
  animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode] [play-state];
}

Порядок значений важен. Некоторые значения можно опускать, тогда будут использоваться значения по умолчанию.

Параметры

`name`

Имя анимации, определённой через @keyframes.

@keyframes fadeIn { /* ... */ }
.element { animation-name: fadeIn; }

`duration`

Продолжительность одного цикла анимации. Указывается в секундах (s) или миллисекундах (ms).
Значение по умолчанию: 0s (анимация не видна).

animation-duration: 1.5s;

`timing-function`

Функция плавности (easing), определяющая скорость изменения анимации во времени.
Значение по умолчанию: ease.

Возможные значения:

linear — равномерная скорость;
ease — медленно в начале и конце, быстро в середине;
ease-in — медленно в начале;
ease-out — медленно в конце;
ease-in-out — медленно в начале и в конце;
cubic-bezier(x1, y1, x2, y2) — кастомная кривая Безье.

animation-timing-function: ease-in-out;

`delay`

Задержка перед началом анимации. Может быть отрицательной.
Значение по умолчанию: 0s.

animation-delay: 0.5s;

`iteration-count`

Сколько раз повторять анимацию.
Значение по умолчанию: 1.

Возможные значения:

число (3, 5.5);
infinite — бесконечное повторение.

animation-iteration-count: infinite;

`direction`

Направление воспроизведения анимации.
Значение по умолчанию: normal.

Возможные значения:

normal — проигрывание от 0% к 100%;
reverse — проигрывание от 100% к 0%;
alternate — чётные циклы в прямом направлении, нечётные — в обратном;
alternate-reverse — наоборот: чётные — в обратном, нечётные — в прямом.

animation-direction: alternate;

`fill-mode`

Определяет, как элемент выглядит до и после выполнения анимации.
Значение по умолчанию: none.

Возможные значения:

none — стили применяются только во время анимации;
forwards — после завершения анимации сохраняется стиль последнего кадра;
backwards — до начала анимации применяется стиль первого кадра (учитывая delay);
both — комбинация forwards и backwards.

animation-fill-mode: forwards;

`play-state`

Управление воспроизведением анимации.
Значение по умолчанию: running.

Возможные значения:

running — анимация воспроизводится;
paused — анимация приостановлена.

animation-play-state: paused;

Определение анимации — `@keyframes`

Правило @keyframes задаёт последовательность стилей для анимации.

Синтаксис

@keyframes animation-name {
  from { /* начальные стили */ }
  to   { /* конечные стили */ }
}

Или с использованием процентов:

@keyframes animation-name {
  0%   { /* начальные стили */ }
  50%  { /* промежуточные стили */ }
  100% { /* конечные стили */ }
}

Ключевые слова from и to эквивалентны 0% и 100%.

Примеры

Пример 1 — Простой слайд

@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(100px); }
}

.box {
  animation: slide 2s ease-in-out 0.2s infinite alternate;
}

Разбор:

имя: slide
длительность: 2s
функция: ease-in-out
задержка: 0.2s
повтор: infinite
направление: alternate

Пример 2 — Пульсация прозрачности

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

.fade-element {
  animation: pulse 1.2s infinite;
}

Пример 3 — Вращение с паузой

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

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

.spinner:hover {
  animation-play-state: paused;
}

Пример 4 — Анимация с финальным состоянием

@keyframes expand {
  to { width: 200px; background-color: green; }
}

.grower {
  width: 50px;
  background-color: red;
  animation: expand 1.5s forwards;
}

После завершения анимации элемент остаётся шириной 200px и зелёного цвета благодаря forwards.

Отдельные свойства

Если нужно контролировать каждый параметр отдельно, можно использовать длинную форму:

.element {
  animation-name: bounce;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 0s;
  animation-iteration-count: 3;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}

`transform` в CSS

transform — это свойство CSS, которое применяет геометрические преобразования к элементу — перемещение, поворот, масштабирование, наклон и другие трансформации. Эти изменения не влияют на поток документа: соседние элементы продолжают вести себя так, будто трансформированный элемент остаётся на своём исходном месте.

Синтаксис

selector {
  transform: <transform-function> [<transform-function>]* | none;
}

Можно указать одну или несколько функций преобразования через пробел. Порядок важен: трансформации применяются последовательно слева направо.

Значение по умолчанию: none.

Основные функции преобразования

Напоминание: ниже — встроенные преобразования CSS (translate, rotate), не функции программы; общая идея именованного вызова — функции в коде.

`translate()` — перемещение

Сдвигает элемент по горизонтали (ось X) и/или вертикали (ось Y).

translate(tx) — сдвиг только по X.
translate(tx, ty) — сдвиг по X и Y.
translateX(tx) — только по X.
translateY(ty) — только по Y.
translateZ(tz) — по оси Z (в 3D-контексте).
translate3d(tx, ty, tz) — трёхмерное перемещение.

Значения могут быть:

в пикселях (px);
в процентах (%) — относительно собственного размера элемента;
другими единицами длины (em, rem, cm и т.д.).

Пример:

.element {
  transform: translate(20px, 10px);
}

`rotate()` — поворот

Поворачивает элемент вокруг точки трансформации (по умолчанию — центр элемента).

rotate(angle) — двумерный поворот.
rotateX(angle), rotateY(angle), rotateZ(angle) — поворот вокруг соответствующей оси.
rotate3d(x, y, z, angle) — поворот вокруг произвольной 3D-оси.

Угол задаётся в:

градусах (deg);
радианах (rad);
градах (grad);
оборотах (turn), где 1turn = 360deg.

Пример:

.element {
  transform: rotate(45deg);
}

`scale()` — масштабирование

Изменяет размер элемента относительно его исходного состояния.

scale(s) — одинаковое масштабирование по X и Y.
scale(sx, sy) — раздельное масштабирование.
scaleX(sx), scaleY(sy), scaleZ(sz) — по отдельным осям.
scale3d(sx, sy, sz) — трёхмерное масштабирование.

Значения:

1 — исходный размер;
>1 — увеличение;
<1 — уменьшение;
отрицательные значения — зеркальное отражение.

Пример:

.element {
  transform: scale(1.5); /* увеличить на 50% */
}

`skew()` — наклон

Наклоняет элемент по осям X и/или Y.

skew(ax) — наклон только по X.
skew(ax, ay) — наклон по обеим осям.
skewX(ax), skewY(ay) — отдельно по каждой оси.

Углы задаются так же, как в rotate().

Пример:

.element {
  transform: skew(20deg, 10deg);
}

Примечание: skew() редко используется в современных интерфейсах из-за визуальной сложности и ограниченной практической пользы.

Комбинирование трансформаций

Функции можно комбинировать в одном свойстве:

.element {
  transform: translate(50px, 20px) rotate(30deg) scale(1.2);
}

Порядок применения:

Сначала — translate;
Затем — rotate;
В конце — scale.

Изменение порядка приведёт к другому визуальному результату, так как каждая следующая трансформация применяется к уже изменённой системе координат.

Точка трансформации — `transform-origin`

По умолчанию все трансформации применяются относительно центра элемента (50% 50%). Это поведение можно изменить с помощью свойства transform-origin.

Синтаксис:

transform-origin: [x] [y] [z];

Возможные значения:

ключевые слова — left, center, right, top, bottom;
проценты: 0% 0%, 100% 100%;
единицы длины: 10px 20px.

Пример:

.element {
  transform: rotate(45deg);
  transform-origin: top left;
}

Теперь элемент будет вращаться вокруг своего левого верхнего угла.

3D-трансформации

Для работы с трёхмерными преобразованиями требуется установка перспективы через свойство perspective (обычно на родительском контейнере):

.container {
  perspective: 800px;
}

.item {
  transform: rotateY(45deg) translateZ(50px);
}

Основные 3D-функции:

rotateX(), rotateY(), rotateZ();
translateZ(), translate3d();
scaleZ(), scale3d().

Без perspective 3D-трансформации будут выглядеть как плоские.

Примеры использования

Пример 1 — Центрирование с помощью `translate`

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Элемент точно центрируется по горизонтали и вертикали, независимо от его размеров.

Пример 2 — Эффект наведения

.card {
  transition: transform 0.3s ease;
}
.card:hover {
  transform: translateY(-5px) scale(1.02);
}

Карточка слегка поднимается и увеличивается при наведении.

Пример 3 — Вращающийся индикатор загрузки

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

Пример 4 — Зеркальное отражение

.mirror {
  transform: scaleX(-1);
}

Элемент отображается как зеркальное отражение по горизонтали.

`transition` в CSS

transition — это составное свойство CSS, которое задаёт плавный переход между двумя состояниями элемента при изменении его стилей. Переход активируется автоматически, когда значение наблюдаемого CSS-свойства меняется — например, при наведении (:hover), фокусе (:focus), переключении класса через JavaScript или изменении медиаусловий.

Синтаксис

Базовый синтаксис:

selector {
  transition: [property] [duration] [timing-function] [delay];
}

Можно указать от одного до четырёх значений. Порядок важен:

Имя свойства (или all);
Длительность;
Функция сглаживания;
Задержка перед началом перехода.

Пример:

.box {
  transition: opacity 0.4s ease-in 0.1s;
}

Также можно использовать отдельные свойства для большей читаемости:

.box {
  transition-property: opacity;
  transition-duration: 0.4s;
  transition-timing-function: ease-in;
  transition-delay: 0.1s;
}

Параметры

`transition-property`

Определяет, какие CSS-свойства подлежат плавному переходу.

Возможные значения:

конкретное свойство — color, background-color, opacity, transform, width и т.д.;
all — все анимируемые свойства;
none — отключает переходы.

Пример:

.element {
  transition-property: background-color, transform;
}

Не все CSS-свойства поддерживают плавные переходы. Анимируемые свойства — те, у которых есть промежуточные числовые или цветовые значения (например, opacity, color, transform). Свойства вроде display или z-index не анимируются.

`transition-duration`

Задаёт продолжительность перехода. Указывается в секундах (s) или миллисекундах (ms).

Минимальное значение: 0s (мгновенное изменение);
Можно задать разную длительность для разных свойств, если их несколько.

Пример:

.element {
  transition-property: color, transform;
  transition-duration: 0.2s, 0.6s;
}

Цвет изменится за 0.2 секунды, а трансформация — за 0.6 секунды.

`transition-timing-function`

Определяет, как скорость изменения свойства распределяется во времени.

Возможные значения:

ease — медленно в начале и конце, быстро в середине (по умолчанию);
linear — равномерная скорость;
ease-in — ускорение в начале;
ease-out — замедление в конце;
ease-in-out — ускорение в начале, замедление в конце;
cubic-bezier(x1, y1, x2, y2) — пользовательская кривая Безье;
steps(n, [start|end]) — пошаговая анимация без промежуточных значений.

Пример:

.element {
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

`transition-delay`

Задержка перед началом перехода после изменения свойства. Может быть отрицательной (переход начнётся с середины).

Пример:

.element {
  transition-delay: 0.3s;
}

Отрицательная задержка:

.element {
  transition-delay: -0.2s; /* переход начнётся так, будто уже прошло 0.2 секунды */
}

Примеры использования

Пример 1 — Простой ховер-эффект

.button {
  background-color: blue;
  color: white;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: red;
}

Фон плавно меняется с синего на красный за 0.3 секунды.

Пример 2 — Множественные свойства

.card {
  background: #f0f0f0;
  transform: scale(1);
  transition: background 0.4s ease, transform 0.3s ease-out;
}

.card:hover {
  background: #e0e0e0;
  transform: scale(1.05);
}

При наведении фон и масштаб изменяются с разной длительностью и функцией сглаживания.

Пример 3 — Отложенное появление

.tooltip {
  opacity: 0;
  transition: opacity 0.2s ease 0.1s;
}

.tooltip.show {
  opacity: 1;
}

Когда добавляется класс .show, прозрачность начинает меняться не сразу, а спустя 0.1 секунды.

Пример 4 — Пошаговый переход

.progress-bar {
  width: 0%;
  transition: width 2s steps(10, end);
}

.progress-bar.active {
  width: 100%;
}

Ширина увеличивается не плавно, а рывками — 10 шагов за 2 секунды.

`transition: all` — удобно, но осторожно

Сокращение transition: all 0.3s ease анимирует все свойства, у которых есть промежуточные значения. Подходит для простых кнопок и карточек на учебных страницах.

.card {
  transition: all 0.25s ease-in-out;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

Минусы в проде: браузер следит за десятками свойств сразу; случайно "плывут" width, padding, border-color. Надёжнее перечислять явно:

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

Подход	Когда
`transition: all`	Быстрый прототип, один hover-эффект
Список свойств	Компоненты в библиотеке, баннеры, формы
Только `transform` + `opacity`	Максимально плавно для GPU (см. шпаргалку)

Сравнение `transition` и `animation`

	`transition`	`animation` + `@keyframes`
Запуск	При смене значения (`:hover`, класс, медиазапрос)	Сразу или по событию, может идти сама
Повтор	Один проход туда-обратно при смене состояния	`infinite`, `alternate`, счётчик итераций
Кадры	Только начало и конец (браузер интерполирует)	Любые проценты: `0%`, `40%`, `100%`
Типичное применение	Кнопка, tooltip, смена слайда по `opacity`	Спиннер, shimmer, "парящий" декор на баннере

Обе техники часто комбинируют: слайд переключают через transition: opacity, а фоновые круги крутят через animation: floatY 4s ease-in-out infinite.

Градиенты: linear, radial, conic

Градиенты задают фон без картинки — удобны для hero-баннеров, кнопок и подсветки текста. Пишутся как значение background-image (или в сокращении background).

`linear-gradient`

Линейный переход вдоль линии. Угол или направление — первый аргумент.

.hero {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #db2777 100%);
}

.hero--overlay {
  /* затемнение поверх фото для читаемого текста */
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent 60%),
    url('/img/promo.jpg') center / cover no-repeat;
}

Синтаксис	Смысл
`180deg` / `to bottom`	Сверху вниз
`90deg` / `to right`	Слева направо
`135deg`	Диагональ "как на лендингах"
Несколько `color-stop`	Полосы, "закат", брендовые полосы
`transparent`	Плавное исчезновение к краю

`radial-gradient` и `conic-gradient`

.spotlight {
  background: radial-gradient(circle at 30% 20%, #fff 0%, transparent 55%);
}

.badge-ring {
  background: conic-gradient(from 0deg, #3b82f6, #8b5cf6, #3b82f6);
}

conic-gradient — по кругу вокруг точки; часто для индикаторов загрузки и декоративных колец (см. также Функции в CSS).

Анимация градиента (shimmer)

Статичный градиент можно "сдвигать", меняя background-position или размер фона:

Код ITЗагрузка примера кода…

Готовый разбор shimmer и спиннера — CSS-анимации — готовые эффекты.

`opacity` и наложение слоёв

opacity — прозрачность всего элемента (от 0 до 1). В отличие от rgba() в color, влияет на весь блок вместе с детьми и создаёт отдельный stacking context при значении меньше 1.

.modal-backdrop {
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.modal-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

Задача	Почему `opacity`, а не `visibility` / `display`
Плавное появление модалки, tooltip, слайда	Между `0` и `1` есть промежуточные кадры для `transition`
Затемнение фона	Один слой поверх страницы
Неактивный слайд карусели	Слайд невидим, но layout можно держать через `position` (см. баннеры)

Важно: при opacity: 0 элемент формально остаётся на странице — для кликов отключайте pointer-events: none или используйте aria-hidden в разметке.

`position`: relative и absolute в эффектах

Краткий обзор — в Основные стили, § position. В анимациях и баннерах эта пара встречается постоянно.

Значение	Роль в motion/UI
`relative`	"Якорь" для дочерних `absolute`; лёгкий сдвиг без вырыва из потока
`absolute`	Слайды в одной рамке, кнопки "вперёд/назад", бейдж "NEW", декор
`fixed`	Плавающая кнопка, полноэкранная подложка
`sticky`	Шапка баннера при прокрутке лендинга

Карусель: контейнер position: relative, слайды position: absolute; inset: 0, активный — opacity: 1. Подробная разметка — Промо-карусель.

Центрирование + transform: классическая связка не меняет поток, но визуально ставит блок в центр:

.loader-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

top/left в анимациях лучше не дёргать на каждый кадр — предпочитайте transform: translate() (меньше перерасчёта layout).

`justify-content`, `gap` и `float`

Flex и выравнивание в баннере

Текст и кнопка внутри слайда часто выравнивают через Flex — главная ось задаётся flex-direction. Подробно про оси — Flexbox и CSS Grid.

.slide__content {
  display: flex;
  flex-direction: column;
  justify-content: center;   /* по главной оси (здесь — вертикаль) */
  align-items: flex-start;   /* по поперечной */
  gap: 1rem;                 /* между заголовком, текстом и кнопкой */
  min-height: 220px;
  padding: 1.5rem;
}

`justify-content`	Эффект (при `flex-direction: row`)
`flex-start`	К началу оси
`center`	По центру
`flex-end`	К концу
`space-between`	Крайние к краям, между — равные промежутки
`space-around` / `space-evenly`	Равномерное распределение с отступами по краям

В Grid тот же смысл у justify-items / justify-content на сетке; между ячейками — gap (и row-gap, column-gap) вместо отрицательных margin.

.banner-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

`float` — только обтекание, не сетка

float: left | right изначально для обтекания картинки текстом. Для колонок и карточек сегодня — Flex/Grid. Встречается в старом коде и в CMS-темах; для новых баннеров и анимаций не используйте.

Баннеры и промо-блоки

Промо-блок объединяет несколько идей из этой главы:

Фон — linear-gradient и/или background-size: cover.
Слои — position: relative у контейнера, absolute у слайдов и стрелок.
Смена — transition: opacity 0.6s ease или отдельные @keyframes для декора.
Движение декора — animation: … ease-in-out infinite на transform: translateY().
Контент — display — flex, justify-content, gap.

Минимальный CSS смены слайдов (без JS):

Код ITЗагрузка примера кода…

Полный чек-лист, HTML с aria-* и автопрокрутка — § Промо-карусель. Интерактивное демо на той же странице.

`prefers-reduced-motion`

Пользователи с включённым "уменьшить движение" в ОС не должны получать бесконечные @keyframes:

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

Для карусели дополнительно отключайте setInterval в JS — см. виджеты.

`perspective` и 3D-флип

perspective на родителе задаёт глубину для rotateX / rotateY у потомков:

.flip-scene {
  perspective: 900px;
}

.flip-card {
  transform-style: preserve-3d;
  transition: transform 0.6s ease-in-out;
}

.flip-card.is-flipped {
  transform: rotateY(180deg);
}

Без perspective поворот по Y выглядит плоским. Точка вращения — transform-origin: center center (по умолчанию центр).

Каталог типовых анимаций

Ниже — самодостаточные рецепты. Подставьте свой селектор; длительность и ease-in-out / infinite подстраивайте под макет.

Появление и исчезновение

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.fade-in {
  animation: fadeIn 0.5s ease-out forwards;
}

@keyframes fadeOut {
  to { opacity: 0; }
}

Сдвиг по осям (`translateX`, `translateY`)

@keyframes slideInLeft {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

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

Масштаб (`scale`)

@keyframes popIn {
  0%   { transform: scale(0.85); opacity: 0; }
  70%  { transform: scale(1.03); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}
.heartbeat {
  animation: heartbeat 1.2s ease-in-out infinite;
}

Вращение (`rotate`)

@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner {
  animation: spin 0.9s linear infinite;
}

@keyframes spinSlow {
  to { transform: rotate(360deg); }
}
.decor-orbit {
  animation: spinSlow 18s linear infinite;
}

"Парение" и покачивание

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
.float {
  animation: floatY 3.5s ease-in-out infinite;
}

@keyframes wobble {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-3deg); }
  75%      { transform: rotate(3deg); }
}

Встряхивание (shake)

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
.shake-on-error {
  animation: shake 0.4s ease-in-out;
}

Подсветка (glow / pulse цвета)

@keyframes glow {
  0%, 100% { box-shadow: 0 0 0 rgba(59, 130, 246, 0); }
  50%      { box-shadow: 0 0 20px rgba(59, 130, 246, 0.6); }
}

Бегущая строка (marquee)

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 12s linear infinite;
}

Дублируйте содержимое в разметке, чтобы -50% совпало с длиной одного "цикла".

Каскад с `animation-delay`

Один @keyframes, разные задержки у детей:

.stagger-item {
  opacity: 0;
  animation: slideInUp 0.5s ease-out forwards;
}
.stagger-item:nth-child(1) { animation-delay: 0.05s; }
.stagger-item:nth-child(2) { animation-delay: 0.15s; }
.stagger-item:nth-child(3) { animation-delay: 0.25s; }

Чередование направления

.ping-pong {
  animation: floatY 2s ease-in-out infinite alternate;
}

alternate меняет направление каждый цикл без отдельного кадра "назад".

Пауза при наведении

.icon-spin {
  animation: spin 2s linear infinite;
}
.icon-spin:hover {
  animation-play-state: paused;
}

Сводная таблица easing

Функция	Характер
`linear`	Равномерно — спиннеры, marquee
`ease`	По умолчанию, универсально
`ease-in`	Разгон в начале
`ease-out`	Замедление в конце — появление элементов
`ease-in-out`	Мягкий старт и финиш — "парение", баннеры
`cubic-bezier(…)`	Своя кривая — "пружина", overshoot
`steps(n)`	Дискретные кадры — псевдо-спрайт, прогресс

Что изучить дальше

Тема	Где
Готовые файлы с разбором	CSS-анимации — лаборатория
Hero + JS	Промо-карусель, виджеты JS
Flex, Grid, `gap`	§ Flex и Grid
`position` в макете	§ Основные стили
Таблицы свойств	Справочник
Практика "что использовать"	Рекомендации

Анимации и трансформации​

animation в CSS​

Синтаксис​

Параметры​

name​

duration​

timing-function​

delay​

iteration-count​

direction​

fill-mode​

play-state​

Определение анимации — @keyframes​

Синтаксис​

Примеры​

Пример 1 — Простой слайд​

Пример 2 — Пульсация прозрачности​

Пример 3 — Вращение с паузой​

Пример 4 — Анимация с финальным состоянием​

Отдельные свойства​

transform в CSS​

Синтаксис​

Основные функции преобразования​

translate() — перемещение​

rotate() — поворот​

scale() — масштабирование​

skew() — наклон​

Комбинирование трансформаций​

Точка трансформации — transform-origin​

3D-трансформации​

Примеры использования​

Пример 1 — Центрирование с помощью translate​

Пример 2 — Эффект наведения​

Пример 3 — Вращающийся индикатор загрузки​

Пример 4 — Зеркальное отражение​

transition в CSS​

Синтаксис​

Параметры​

transition-property​

transition-duration​

transition-timing-function​

transition-delay​

Примеры использования​

Пример 1 — Простой ховер-эффект​

Пример 2 — Множественные свойства​

Пример 3 — Отложенное появление​

Пример 4 — Пошаговый переход​

transition: all — удобно, но осторожно​

Сравнение transition и animation​

Градиенты: linear, radial, conic​

linear-gradient​

radial-gradient и conic-gradient​

Анимация градиента (shimmer)​

opacity и наложение слоёв​

position: relative и absolute в эффектах​

justify-content, gap и float​

Flex и выравнивание в баннере​

float — только обтекание, не сетка​

Баннеры и промо-блоки​

prefers-reduced-motion​

perspective и 3D-флип​

Каталог типовых анимаций​

Появление и исчезновение​

Сдвиг по осям (translateX, translateY)​

Масштаб (scale)​

Вращение (rotate)​

"Парение" и покачивание​

Встряхивание (shake)​

Подсветка (glow / pulse цвета)​

Бегущая строка (marquee)​

Каскад с animation-delay​

Чередование направления​

Пауза при наведении​

Сводная таблица easing​

Что изучить дальше​

Связанные темы

См. также

CSS

Подключение и организация CSS-кода

Переменные в CSS

Анимации и трансформации

`animation` в CSS

Синтаксис

Параметры

`name`

`duration`

`timing-function`

`delay`

`iteration-count`

`direction`

`fill-mode`

`play-state`

Определение анимации — `@keyframes`

Синтаксис

Примеры

Пример 1 — Простой слайд

Пример 2 — Пульсация прозрачности

Пример 3 — Вращение с паузой

Пример 4 — Анимация с финальным состоянием

Отдельные свойства

`transform` в CSS

Синтаксис

Основные функции преобразования

`translate()` — перемещение

`rotate()` — поворот

`scale()` — масштабирование

`skew()` — наклон

Комбинирование трансформаций

Точка трансформации — `transform-origin`

3D-трансформации

Примеры использования

Пример 1 — Центрирование с помощью `translate`

Пример 2 — Эффект наведения

Пример 3 — Вращающийся индикатор загрузки

Пример 4 — Зеркальное отражение

`transition` в CSS

Синтаксис

Параметры

`transition-property`

`transition-duration`

`transition-timing-function`

`transition-delay`

Примеры использования

Пример 1 — Простой ховер-эффект

Пример 2 — Множественные свойства

Пример 3 — Отложенное появление

Пример 4 — Пошаговый переход

`transition: all` — удобно, но осторожно

Сравнение `transition` и `animation`

Градиенты: linear, radial, conic

`linear-gradient`

`radial-gradient` и `conic-gradient`

Анимация градиента (shimmer)

`opacity` и наложение слоёв

`position`: relative и absolute в эффектах

`justify-content`, `gap` и `float`

Flex и выравнивание в баннере

`float` — только обтекание, не сетка

Баннеры и промо-блоки

`prefers-reduced-motion`

`perspective` и 3D-флип

Каталог типовых анимаций

Появление и исчезновение

Сдвиг по осям (`translateX`, `translateY`)

Масштаб (`scale`)

Вращение (`rotate`)

"Парение" и покачивание

Встряхивание (shake)

Подсветка (glow / pulse цвета)

Бегущая строка (marquee)

Каскад с `animation-delay`

Чередование направления

Пауза при наведении

Сводная таблица easing

Что изучить дальше