Код Справочник по фронтенду

#статьи

2 окт 2025
0

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

Оживляем веб-страницы без скриптов с помощью CSS.

Иллюстрация: Polina Vari для Skillbox Media

Редакция «Код» Skillbox Media

Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.

CSS-анимации помогают сделать интерфейс живым: кнопки плавно меняют цвет, тексты появляются с эффектом прозрачности, картинки двигаются. Для этого не нужен JavaScript — всё можно описать на чистом CSS.

В этой статье мы создадим первую анимацию с нуля, разберём, как работают ключевые кадры и свойства animation, научимся настраивать скорость, задержку и повторение. Всё будет работать прямо в браузере: достаточно открыть HTML‑файл и посмотреть результат.

Содержание

Что такое CSS-анимации и в чём их преимущество
Три кита CSS-анимаций: transition, animation, @keyframes
Создание простой CSS-анимации с нуля
Длительность, задержка, плавность и повторение анимации
Какие свойства можно анимировать, а какие нельзя
Применение анимаций к псевдоклассам
Типичные ошибки новичков при работе с CSS-анимациями
Когда лучше использовать CSS-анимации, а когда JavaScript

Что такое CSS-анимации и в чём их преимущество

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

Любая анимация состоит из двух частей. Сначала мы задаём, что именно будет происходить с элементом. Например, он станет прозрачным, повернётся или увеличится. Потом описываем ключевые кадры — точки во времени, в которых элемент меняет состояние. Браузер сам плавно воспроизводит переходы между этими кадрами.

CSS-анимации можно применять почти ко всем HTML-тегам:

Блочным: <div>, <section>, <header>, <footer>, <article>, <main>, <nav>, <aside>, <h1> — <h6>.
Строчным: <span>, <a>, <strong>, <em>, <b>, <i>, <small>, <mark>, <code>, <abbr>, <del>, <ins>, <sub>, <sup>, <u>.
Формам: <input>, <button>, <label>, <textarea>, <select>, <option>.
Медиа: <img>, <video>, <audio>, <picture>.
Спискам: <ul>, <ol>, <li>.
Таблицам (ограниченные возможности): <table>, <tr>, <td>, <th>.

CSS-анимации прописываются в отдельном CSS-файле, который потом подключается в блоке <head> в HTML, либо весь код CSS-анимации прописывается в теге <style> так же в HTML.

Вот так выглядит код CSS-анимации в HTML файле в теге <style>:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>CSS-анимации</title>
  <style>
    /* Определяем ключевую анимацию: элемент появляется снизу и становится видимым */
    @keyframes fadeIn {
      0% {
        opacity: 0; /* Элемент полностью прозрачный в начале */
        transform: translateY(20px); /* Смещён вниз на 20px */
      }
      100% {
        opacity: 1; /* Полностью видимый */
        transform: translateY(0); /* Возвращается на своё место */
      }
    }

    .intro {
      /* Применяем анимацию fadeIn */
      animation: fadeIn 3s ease-out;
      
      /* Стили текста */
      font-family: Arial, sans-serif;
      font-size: 2em;
      text-align: center;
      margin-top: 100px;
      color: #333;
    }

    body {
      background-color: #f5f5f5; /* Светлый фон страницы */
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <!-- Элемент с классом .intro, к которому применяется анимация -->
  <h1 class="intro">CSS-анимации!</h1>
</body>
</html>

Если открыть эту страницу в браузере, вы увидите, как воспроизводится CSS-анимация появления элемента <h1> на HTML-странице:

*Инфографика: CSS-анимация. Skillbox Media*

Три кита CSS-анимаций: transition, animation, @keyframes

Вот три ключевых элемента для создания CSS-анимаций:

transition — свойство для плавного анимирования двух состояний, например, при наведении мыши.
@keyframes — описывает пошаговое поведение анимации, состояния во времени, создавая эффект движения.
animation — позволяет воспроизводить заранее описанную сложную анимацию с ключевыми кадрами, используя разные настройки: задержку, направление, продолжительность и так далее.

transition — работает только между двумя состояниями: что было и что стало.

Применяем transition к кнопке на веб-странице:

/* Класс кнопки */
.button {
  /* Плавный переход для изменения фона */
  transition: background-color 1s ease;
}

/* Состояние при наведении */
.button:hover {
  /* Новый цвет фона при наведении курсора */
  background-color: #f87171; /* Мягкий красно-розовый (Tailwind-стиль) */
}

Свойство transition применяется для реактивных эффектов — появляющихся, например, при наведении курсора, фокусе или клике по элементу. Анимация с его использованием на кнопке выглядит так:

С помощью @keyframes и animation задаём последовательность действий. В @keyframes задаются ключевые моменты движения элемента, а в animation указываются имя анимации, скорость, длительность и тип переходов между ключевыми кадрами.

/* Анимация "пульсация" */
@keyframes pulse {
  0%   { transform: scale(2); }   /* Начинаем с увеличенного размера */
  50%  { transform: scale(1); }   /* Сжимаем до исходного */
  100% { transform: scale(2); }   /* Возвращаемся к увеличенному */
}

.icon {
  /* Применяем анимацию pulse */
  animation: pulse 1s infinite ease-in-out;
  /* 1s — длительность одного цикла
     infinite — бесконечное повторение
     ease-in-out — сглаженное ускорение/замедление */
}

Связка @keyframes и animation используется, если нужна полноценная настраиваемая и гибкая анимация.

Применим этот код к HTML-элементу <div>, внутри которого содержится специальный символ:

<body>
  <div class="icon">🔵</div>
</body>

Если мы откроем браузер, то анимация будет выглядеть вот так:

Создание простой CSS-анимации с нуля

Создадим простую CSS-анимацию появления надписи, используя @keyframes и animation.

Создадим файл index.html и оформим его следующим образом:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Создание простой CSS-анимации</title>
  <style>
    /* Здесь будет код нашей будущей CSS-анимации */
  </style>
</head>
<body>
  <div class="title">Привет, CSS-анимация!</div>
</body>
</html>

Мы будем анимировать элемент <div>, содержащий надпись «Привет, CSS-анимация!». Код анимации разместим между открывающим и закрывающим тегом <style>.

Вернёмся к @keyframes. В этом элементе каждый шаг анимации задаётся в процентах, представляя собой шкалу времени от 0 до 100%. Этот подход хорошо виден в предыдущем примере.

Если анимация состоит всего из двух шагов — начального и конечного ключевых моментов, то можно использовать ключевые слова from и to:

@keyframes fadeIn {
  from { opacity: 0; } /* Начальное состояние — полностью прозрачный */
  to   { opacity: 1; } /* Конечное состояние — полностью видимый */
}

После ключевого слова @keyframes указывают имя анимации. В фигурных скобках после ключевых слов from и to задают изменения свойств: opacity отвечает за прозрачность, и изменяем мы её от 0 к 1.

Далее анимацию нужно применить к элементу <div>. Для этого объявляем селектор .title и используем второй компонент (в данном случае свойство) для создания анимаций animation. В нём через пробел мы прописываем имя анимации (в нашем примере — fadeIn), далее её продолжительность 3s (3 секунды) и параметр ease-out — плавное замедление к концу.

/* Стили для заголовка с анимацией */
.title {
    animation: fadeIn 3s ease-out; /* Применяем анимацию */
	  
    font-family: Arial, sans-serif;
    font-size: 2em;
    text-align: center;
    margin-top: 100px;
    color: #333;
}

Сохраним index.html и запустим его в браузере:

Так мы создали простую анимацию с использованием связки @keyframes и animation.

Длительность, задержка, плавность и повторение CSS-анимации

CSS-анимации управляются свойствами animation, которые отвечают за длительность, задержку, плавность и другие функции.

Вот таблица основных таких свойств и их описание:

Свойство	Описание	Пример значения
animation-name	Имя анимации	animName
animation-duration	Длительность анимации	1s, 0.5s
animation-delay	Задержка перед началом	0.2, 1s
animation-timing-function	Плавность перехода	ease, linear, ease-in-out
animation-iteration-count	Количество повторений	1, infinite
animation-direction	Направление анимации: вперёд или назад	normal, alternate
animation-fill-mode	Оставляет ли финальное состояние	forwards, both
animation-play-state	Состояние анимации	paused, -running

Свойство animation — это сокращённая запись, которая может включать в себя эти свойства через пробел:

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

Но чтобы не запутаться, лучше прописывать эти параметры отдельно.

Применим тонкую настройку CSS-анимаций к элементу <h1> с надписью «CSS умеет всё!»:

/* Анимация: поворот и смена цвета */
@keyframes spinAndColor {
      0% {
        transform: rotate(0deg);
        color: #ef4444; /* Красный */
      }
      50% {
        transform: rotate(180deg);
        color: #3b82f6; /* Синий */
      }
      100% {
        transform: rotate(360deg);
        color: #22c55e; /* Зелёный */
      }
}

.animated-title {
      animation-name: spinAndColor;         /* Имя анимации */
      animation-duration: 4s;               /* Длительность: 4 секунды */
      animation-delay: 1s;                  /* Задержка: 1 секунда */
      animation-timing-function: ease-in-out; /* Плавность — мягкий старт и финиш */
      animation-iteration-count: infinite;  /* Бесконечное повторение */
      animation-direction: alternate;       /* Туда и обратно */
      animation-fill-mode: both;            /* Сохраняет стили в начале и в конце */
      animation-play-state: running;        /* Анимация активна */
}

Эта CSS-анимация будет выглядеть так:

Какие свойства можно анимировать, а какие нельзя

Не все свойства, которые кажутся «движущимися», можно анимировать. Некоторые легко поддаются плавным переходам, а другие просто не реагируют на анимацию.

Свойства, которые можно анимировать:

opacity — прозрачность;
transform — трансформация: перемещение, масштаб, поворот, наклон;
color — цвет;
background-color — цвет фона;
margin / padding — внешние и внутренние отступы;
width / height — высота и ширина элемента;
box-shadow — тень от блока;
border-radius — округление углов;

Свойства, которые нельзя анимировать:

display — включает и выключает элемент;
position — изменяет тип позиционирования;
z-index — определяет порядок наложения элементов.

Единственная проблема CSS-анимаций в том, что они много весят и могут привести к тормозам и медленной загрузке страницы.

Для анимирования лучше всего подходят свойства transform и opacity. Они обрабатываются видеокартой с помощью аппаратного ускорения, это повышает производительность.

Анимирование свойств width, height, top, left, margin, padding более ресурсоёмкое. Браузеру приходится пересчитывать размеры и координаты элементов, нагрузка на процессор растёт.

Применение CSS-анимаций к псевдоклассам

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

Список псевдоклассов:

: hover — срабатывает при наведении на элемент;
: focus — активен, когда элемент в фокусе (клик мышью или с клавиатуры);
: active — срабатывает, пока элемент нажат;
: checked — применяется к выбранным чекбоксам или радиокнопкам;
: disabled — когда элемент недоступен;
: nth-child () — срабатывает по порядку внутри родителя.

Пример с псевдоклассом : focus, CSS-код анимации:

input {
  padding: 8px 12px;
  border: 2px solid lightgray;
  border-radius: 4px;
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}

input:focus {
  border-color: dodgerblue;
  box-shadow: 0 0 5px dodgerblue;
}

Когда пользователь кликает по полю ввода, то есть фокусируется на нём, срабатывает CSS-анимация с нашим псевдоклассом : focus: поле подсвечивается синим, и появляется лёгкая тень:

Типичные ошибки новичков при работе с CSS-анимациями

Попытка анимировать display или position — они не поддерживают плавность:

div {
    transition: display 1s ease;
    display: none;
}

Решение: лучше использовать opacity, transform или visibility:

div {
    transition: opacity 0.5s ease;
    opacity: 0;
}

Отсутствие transition при : hover — без него изменения происходят резко:

button:hover {
    background-color: red;
}

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

button {
    transition: background-color 0.3s ease
}

Анимация «в никуда» — забывают задать animation-name или @keyframes:

div {
    animation: 1.5s ease-in-out;
}

Решение: начинать создание CSS-анимации с @keyframes и animation-name:

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

div {
    animation: animName 1.5s ease-in-out;
}

Слишком долгая или резкая анимация — делает интерфейс неудобным:

.menu {
    transition: all 60s linear;
}

Решение: рассчитывать адекватное время, учитывая как производительность, так и интерфейс, не заставляющий пользователя ожидать.

.menu {
    transition: all 0.6s linear;
}

Нерациональное использование infinite — бесконечная анимация там, где не нужна.

.logo {
    animation: load 1.3s linear infinite;
}

Решение: будьте аккуратны с бесконечностью.

Когда лучше использовать CSS-анимации, а когда JavaScript

CSS-анимации — это быстрый, лёгкий и эффективный способ придать интерфейсу живость и выразительность без использования JavaScript. Однако у них есть свои границы. Чтобы анимации работали правильно и не мешали пользователю, важно понимать, где CSS справится сам, а где нужен JavaScript.

Используйте CSS, если:

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

Используйте JavaScript, если:

Анимация должна зависеть от событий, условий или пользовательских данных.
Нужно контролировать воспроизведение: остановка, пауза, отмена, обратная перемотка.
Требуется синхронизация с другими процессами или элементами интерфейса.
Нужна интерактивность: свайпы, клики, drag & drop и так далее.

Больше интересного про код — в нашем телеграм-канале. Подписывайтесь!

Читайте также: