Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>2 окт 2025</li>

3 <li>0</li>

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

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

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

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

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

9 Содержание

10 <ul><li><a>Что такое CSS-анимации и в чём их преимущество</a></li>

11 <li><a>Три кита CSS-анимаций: transition, animation, @keyframes</a></li>

12 <li><a>Создание простой CSS-анимации с нуля</a></li>

13 <li><a>Длительность, задержка, плавность и повторение анимации</a></li>

14 <li><a>Какие свойства можно анимировать, а какие нельзя</a></li>

15 <li><a>Применение анимаций к псевдоклассам</a></li>

16 <li><a>Типичные ошибки новичков при работе с CSS-анимациями</a></li>

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

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

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

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

21 <ul><li>Блочным:<a><div></a>, <section>,<a><header></a>,<a><footer></a>,<a><article></a>, <main>, <nav>, <aside>,<a><h1> - <h6></a>.</li>

22 <li>Строчным:,<a><a></a>, , ,<a></a>, , , , <code>, <abbr>, <del>, <ins>, , , .</li>

23 <li>Формам:<input>, <button>, <label>, <textarea>, <select>, <option>.</li>

24 <li>Медиа:<a><img></a>, <video>, <audio>, <picture>.</li>

25 <li><a>Спискам</a>:<ul>, <ol>, <li>.</li>

26 <li><a>Таблицам</a>(ограниченные возможности): <table>, <tr>, <td>, <th>.</li>

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

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

29 <!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>  <h1 class="intro">CSS-анимации!</h1> </body> </html>Если открыть эту страницу в браузере, вы увидите, как воспроизводится CSS-анимация появления элемента <h1> на HTML-странице:

30 Инфографика: CSS-анимация. Skillbox MediaВот три ключевых элемента для создания CSS-анимаций:

31 <ul><li>transition - свойство для плавного анимирования двух состояний, например, при наведении мыши.</li>

32 <li>@keyframes - описывает пошаговое поведение анимации, состояния во времени, создавая эффект движения.</li>

33 <li>animation - позволяет воспроизводить заранее описанную сложную анимацию с ключевыми кадрами, используя разные настройки: задержку, направление, продолжительность и так далее.</li>

34 </ul>transition - работает только между двумя состояниями: что было и что стало.

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

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

37 Инфографика: CSS-анимация. Skillbox MediaС помощью @keyframes и animation задаём последовательность действий. В @keyframes задаются ключевые моменты движения элемента, а в animation указываются имя анимации, скорость, длительность и тип переходов между ключевыми кадрами.

38 /* Анимация "пульсация" */ @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 используется, если нужна полноценная настраиваемая и гибкая анимация.

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

40 <body> <div class="icon">🔵</div> </body>Если мы откроем браузер, то анимация будет выглядеть вот так:

41 Инфографика: CSS-анимация. Skillbox MediaСоздадим простую CSS-анимацию появления надписи, используя @keyframes и animation.

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

43 <!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>.

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

45 Инфографика: Skillbox MediaЕсли анимация состоит всего из двух шагов - начального и конечного ключевых моментов, то можно использовать ключевые слова from и to:

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

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

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

49 Инфографика: CSS-анимация. Skillbox MediaТак мы создали простую анимацию с использованием связки @keyframes и animation.

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

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

52 СвойствоОписаниеПример значения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 - это сокращённая запись, которая может включать в себя эти свойства через пробел:

53 animation: <name> <duration> <timing-function> <delay> <iteration-count> <direction> <fill-mode> <play-state>;Но чтобы не запутаться, лучше прописывать эти параметры отдельно.

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

55 /* Анимация: поворот и смена цвета */ @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-анимация будет выглядеть так:

56 Инфографика: CSS-анимация. Skillbox MediaНе все свойства, которые кажутся "движущимися", можно анимировать. Некоторые легко поддаются плавным переходам, а другие просто не реагируют на анимацию.

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

58 <ul><li>opacity- прозрачность;</li>

59 <li>transform- трансформация: перемещение, масштаб, поворот, наклон;</li>

60 <li>color- цвет;</li>

61 <li>background-color - цвет фона;</li>

62 <li>margin/padding- внешние и внутренние отступы;</li>

63 <li>width/height- высота и ширина элемента;</li>

64 <li>box-shadow- тень от блока;</li>

65 <li>border-radius - округление углов;</li>

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

67 <ul><li>display- включает и выключает элемент;</li>

68 <li>position- изменяет тип позиционирования;</li>

69 <li>z-index- определяет порядок наложения элементов.</li>

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

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

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

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

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

75 <ul><li>: hover - срабатывает при наведении на элемент;</li>

76 <li>: focus - активен, когда элемент в фокусе (клик мышью или с клавиатуры);</li>

77 <li>: active - срабатывает, пока элемент нажат;</li>

78 <li>: checked - применяется к выбранным чекбоксам или радиокнопкам;</li>

79 <li>: disabled - когда элемент недоступен;</li>

80 <li>: nth-child () - срабатывает по порядку внутри родителя.</li>

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

82 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: поле подсвечивается синим, и появляется лёгкая тень:

83 Инфографика: CSS-анимация. Skillbox Media<ul><li>Попытка анимировать display или position - они не поддерживают плавность:</li>

84 </ul>div { transition: display 1s ease; display: none; }Решение:лучше использовать opacity, transform или visibility:

85 div { transition: opacity 0.5s ease; opacity: 0; }<ul><li>Отсутствие transition при : hover - без него изменения происходят резко:</li>

86 </ul>button:hover { background-color: red; }Решение:добавить transition:

87 button { transition: background-color 0.3s ease }<ul><li>Анимация "в никуда" - забывают задать animation-name или @keyframes:</li>

88 </ul>div { animation: 1.5s ease-in-out; }Решение:начинать создание CSS-анимации с @keyframes и animation-name:

89 @keyframes animName { from: { opacity: 0; } to: { opacity: 1; } } div { animation: animName 1.5s ease-in-out; }<ul><li>Слишком долгая или резкая анимация - делает интерфейс неудобным:</li>

90 </ul>.menu { transition: all 60s linear; }Решение:рассчитывать адекватное время, учитывая как производительность, так и интерфейс, не заставляющий пользователя ожидать.

91 .menu { transition: all 0.6s linear; }<ul><li>Нерациональное использование infinite - бесконечная анимация там, где не нужна.</li>

92 </ul>.logo { animation: load 1.3s linear infinite; }Решение:будьте аккуратны с бесконечностью.

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

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

95 <ul><li>Анимация простая и декоративная - например, появление, затухание, движение, наведение.</li>

96 <li>Нужно добиться высокой производительности и плавности.</li>

97 <li>Анимация не требует сложной логики или взаимодействия с данными.</li>

98 <li>Вы хотите, чтобы анимация работала автоматически, как часть дизайна.</li>

99 </ul>Используйте JavaScript, если:

100 <ul><li>Анимация должна зависеть от событий, условий или пользовательских данных.</li>

101 <li>Нужно контролировать воспроизведение: остановка, пауза, отмена, обратная перемотка.</li>

102 <li>Требуется синхронизация с другими процессами или элементами интерфейса.</li>

103 <li>Нужна интерактивность: свайпы, клики, drag & drop и так далее.</li>

104 </ul><a>Курс с трудоустройством: "Профессия Фронтенд-разработчик + ИИ" Узнать о курсе</a>