CSS animation: полное руководство с примерами и свойствами

Контроль потока: timing-function, delay, iteration-count и direction

Эти свойства превращают простую анимацию в профессиональную, добавляя ей характер и динамику.

animation-timing-function (функция временного интервала) — это, пожалуй, самое важное свойство для ощущения «естественности» движения. Оно определяет кривую скорости анимации.

• ease (по умолчанию): Медленный старт, быстро в середине, медленный конец.
• linear: Постоянная скорость от начала до конца.
• ease-in: Медленный старт, быстрый конец.
• ease-out: Быстрый старт, медленный конец.
• ease-in-out: Медленный старт и конец, скорость в середине.
• cubic-bezier(n,n,n,n): Позволяет создать свою уникальную кривую на сайте cubic-bezier.com.

animation-delay — задержка перед началом воспроизведения. Полезно для создания каскадных эффектов, когда элементы начинают двигаться друг за другом.

animation-iteration-count — количество повторений. Можно указать число (2, 5) или ключевое слово infinite для бесконечного цикла.

animation-direction — направление воспроизведения.

• normal (по умолчанию): вперед, от 0% к 100%. reverse: наоборот, от 100% к 0%.
• alternate: чередование (вперед-назад). Особенно полезно в паре с infinite или четным iteration-count.
• alternate-reverse: чередование, начиная с обратного направления.

Добавим нашему блоку более живое поведение:

.animated-box {
  /* ... предыдущие стили ... */
  animation-name: spin-to-circle;
  animation-duration: 2s;
  animation-timing-function: ease-in-out; /* Плавнее */
  animation-delay: 0.5s; /* Небольшая задержка */
  animation-iteration-count: infinite; /* Бесконечный цикл */
  animation-direction: alternate; /* Туда-сюда */
}

Теперь наш квадрат плавно превращается в круг и обратно в бесконечном цикле с небольшой задержкой перед первым стартом.

Что происходит до и после: свойство animation-fill-mode

Помните проблему, когда анимация завершается и элемент резко «прыгает» к исходным стилям? За это отвечает свойство animation-fill-mode. Оно определяет, какие стили применяются к элементу до начала и после завершения анимации.

• none (по умолчанию): стили анимации применяются только во время ее выполнения. До и после — действуют обычные стили элемента.
• forwards: после завершения анимации элемент сохраняет стили последнего ключевого кадра (100% или to). Если iteration-count больше 1, то стили сохраняются после окончания последней итерации.
• backwards: до начала анимации (учитывая animation-delay!) элемент сразу принимает стили первого ключевого кадра (0% или from).
• both: применяются правила и forwards, и backwards.

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

.animated-box-single {
  animation-name: spin-to-circle;
  animation-duration: 2s;
  animation-fill-mode: forwards; /* Останется кругом после анимации */
}

Интерактивность: управление анимацией с помощью animation-play-state

Одно из самых крутых свойств css animation — это animation-play-state. Оно позволяет ставить анимацию на паузу и возобновлять ее. Это открывает двери для создания интерактивных интерфейсов.

Свойство принимает два значения:

• running: анимация воспроизводится.
• paused: анимация приостановлена на текущем кадре.

Чаще всего его меняют с помощью CSS-псевдоклассов или JavaScript.

Пример №1 с наведением (hover):

.pulsing-button {
  animation: pulse 1.5s ease-in-out infinite;
}
.pulsing-button:hover {
  animation-play-state: paused; /* Пауза при наведении */
}
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

Пример №2 с JavaScript (добавление кнопок управления):

<button id="playBtn">▶ Воспроизвести</button>
<button id="pauseBtn">⏸ Пауза</button>
<div class="animated-box"></div>

const box = document.querySelector('.animated-box');
const playBtn = document.getElementById('playBtn');
const pauseBtn = document.getElementById('pauseBtn');
playBtn.addEventListener('click', () => {
  box.style.animationPlayState = 'running';
});
pauseBtn.addEventListener('click', () => {
  box.style.animationPlayState = 'paused';
});

Такая связка CSS @keyframes и простого JS-кода дает мощный инструмент для управления сложными визуальными процессами на странице.

Сокращенная запись: свойство animation (shorthand)

Чтобы не перечислять все свойства по отдельности, можно использовать универсальное и краткое свойство animation. Важно помнить порядок значений:

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

Не обязательно указывать все. Браузер использует значения по умолчанию для пропущенных. Главное — сохранять порядок.

Наш предыдущий сложный пример можно записать одной строкой:

.animated-box {
  /* animation: name duration timing-function delay iteration-count direction fill-mode play-state; */
  animation: spin-to-circle 2s ease-in-out 0.5s infinite alternate both;
}

Практический пример: создание 3D-лоадера

Давайте закрепим все знания, создав популярный анимированный индикатор загрузки (loader), который вращается в трехмерном пространстве.

HTML:

<div class="loader"></div>

CSS:

.loader {
  width: 60px;
  height: 60px;
  border: 6px solid rgba(79, 70, 229, 0.3); /* Полупрозрачная обводка */
  border-top-color: #4f46e5; /* Цветной "бегунок" */
  border-radius: 50%;  
  box-shadow: 0 0 20px rgba(79, 70, 229, 0.5); /* Свечение */
  /* Применяем анимацию */
  animation: loading 2s ease-in-out infinite;
}
/* Создаем сложный 3D-поворот */
@keyframes loading {
  0% {
    transform: rotateX(0) rotateY(0) rotateZ(0);
  }
  33% {
    transform: rotateX(180deg) rotateY(0) rotateZ(0);
  }
  67% {
    transform: rotateX(180deg) rotateY(180deg) rotateZ(0);
  }
  100% {
    transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);
  }
}

Что мы сделали:

1. Создали круглый элемент с цветной границей только сверху (border-top-color).
2. Добавили свечение через box-shadow.
3. Назначили анимацию loading длительностью 2 секунды с плавным ускорением и замедлением (ease-in-out), которая повторяется бесконечно.
4. В @keyframes анимации мы поэтапно вращаем элемент по осям X, Y и Z. Поскольку поворот на 180 градусов по любой оси делает элемент симметричным самому себе, переход от 100% обратно к 0% происходит незаметно, что создает идеально плавный бесконечный цикл.