CSS-анимации: полное руководство с примерами и кодом
2026-02-21 20:15 Diff
https://skillbox.ru/media/code/css-animacii-polnoe-rukovodstvo-s-primerami-i-kodom/

#статьи

  • 2 окт 2025
  • 0

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

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

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

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

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

Содержание

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 — свойство для плавного анимирования двух состояний, например, при наведении мыши.
  • @keyframes — описывает пошаговое поведение анимации, состояния во времени, создавая эффект движения.
  • animation — позволяет воспроизводить заранее описанную сложную анимацию с ключевыми кадрами, используя разные настройки: задержку, направление, продолжительность и так далее.

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

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

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

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

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

С помощью @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-анимация. Skillbox Media

Создадим простую 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%. Этот подход хорошо виден в предыдущем примере.

Инфографика: Skillbox Media

Если анимация состоит всего из двух шагов — начального и конечного ключевых моментов, то можно использовать ключевые слова 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 и запустим его в браузере:

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

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

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

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

СвойствоОписаниеПример значенияanimation-nameИмя анимацииanimNameanimation-durationДлительность анимации1s, 0.5sanimation-delayЗадержка перед началом0.2, 1sanimation-timing-functionПлавность переходаease, linear, ease-in-outanimation-iteration-countКоличество повторений1, infiniteanimation-directionНаправление анимации: вперёд или назадnormal, alternateanimation-fill-modeОставляет ли финальное состояниеforwards, bothanimation-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-анимация будет выглядеть так:

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

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

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

  • 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 — это специальные состояния элементов, которые позволяют добавлять реакции на действия пользователя, например, при наведении курсора, фокусировке на элементе или нажатии.

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

  • : 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-анимация. Skillbox Media
  • Попытка анимировать 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, если:

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


Курс с трудоустройством: «Профессия Фронтенд-разработчик + ИИ» Узнать о курсе