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


Иллюстрация: Polina Vari для 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-анимаций: 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 и так далее.
Больше интересного про код — в нашем телеграм-канале. Подписывайтесь!