Перейти к основному содержимому

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

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

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

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

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

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.

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

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);
}

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

  1. Сначала — translate;
  2. Затем — rotate;
  3. В конце — 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];
}

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

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

Пример:

.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 секунды.

Освоение главы0%