CSS-анимация — это способ оживить интерфейс средствами стилей, без подключения JavaScript для каждого визуального движения. Она подходит для кнопок, карточек, меню, индикаторов загрузки, появления блоков, плавных подсказок и микроинтеракций, которые делают страницу понятнее и приятнее. Если объяснить совсем просто, CSS-анимация работает как заранее прописанный маршрут: у движения есть точка старта, точки изменения состояния и точка завершения. Именно поэтому важно не ограничиваться общими словами, а понимать конкретные параметры: где анимация начинается, через какие этапы проходит, сколько длится, ускоряется ли по пути, повторяется ли и что происходит после окончания.
Что такое CSS animation и когда она лучше JavaScript
CSS animation — это декларативный механизм анимации, при котором браузер сам воспроизводит изменения свойств по заранее описанным ключевым кадрам. В практическом смысле это означает, что разработчик задает маршрут движения, а не управляет каждым кадром вручную.
Когда нужно анимировать прозрачность, смещение, масштаб, вращение, тень, фон или небольшие состояния интерфейса, CSS чаще оказывается проще и чище. Для этого используются два основных инструмента: transition и animation. Первый реагирует на изменение состояния, например при наведении. Второй позволяет задать полноценную временную шкалу с несколькими остановками.
Если провести аналогию, transition — это короткий лифт между двумя этажами: был первый, стал второй. А animation — это маршрутный поезд с четким расписанием и станциями: старт, 25%, 50%, 75%, финиш.
По данным HTTP Archive, CSS остается базовой технологией практически на всех современных сайтах, а анимационные эффекты на основе transform и opacity считаются предпочтительными для производительности, поскольку чаще обрабатываются более эффективно движком рендеринга браузера. Кроме того, рекомендации Google по web performance много лет подчеркивают важность уменьшения тяжелых перерисовок и смещения макета: по этой причине простые CSS-анимации обычно выгоднее сложных скриптовых эффектов.
Когда CSS-анимация особенно уместна
- Подсветка кнопки при наведении.
- Плавное появление карточки товара.
- Скелетоны и индикаторы загрузки.
- Анимация бургер-меню.
- Подсказки, тултипы, уведомления.
- Переходы между визуальными состояниями формы.
Когда без JavaScript не обойтись
JavaScript нужен, если анимация зависит от сложной логики: прокрутки с вычислениями, физики движения, синхронизации с данными, жестов пользователя, временной шкалы с динамическими значениями или управления множеством элементов в реальном времени.
Как создать анимацию на сайте без JavaScript: пошаговый маршрут
Создание CSS-анимации без JavaScript — это процесс из четырех конкретных этапов: выбрать элемент, описать ключевые кадры, назначить параметры воспроизведения и проверить поведение в интерфейсе. Это и есть тот самый маршрут анимации с началом, остановками и финальной точкой.
Маршрут анимации: старт, остановки, финиш
Чтобы не оставаться на уровне теории, разберем конкретный маршрут появления карточки:
- Начало маршрута: элемент находится ниже своей обычной позиции на 24 px и имеет прозрачность 0.
- Первая остановка — 60%: элемент поднимается почти на место, например до -4 px относительно финала, и становится почти видимым.
- Конечная точка — 100%: элемент занимает нормальное положение и имеет прозрачность 1.
- Длительность: 480 ms.
- Стоимость рендеринга: низкая, если использовать transform и opacity, потому что не требуется тяжелое перераспределение элементов страницы.
Базовый пример
.card {
animation: card-enter 480ms ease-out forwards;
}
@keyframes card-enter {
0% {
opacity: 0;
transform: translateY(24px);
}
60% {
opacity: 1;
transform: translateY(-4px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}Здесь маршрут начинается в точке 0%, проходит промежуточную остановку на 60% и заканчивается на 100%. Если бы это был реальный путь транспорта, то отправление было бы со станции «Скрыт», дальше остановка «Почти на месте», а конечная — «Видим и стабилен».
Как подключить анимацию к событию наведения
Для hover-сценариев лучше использовать transition, потому что маршрут состоит только из двух точек: начального и конечного состояния.
.button {
background: #2563eb;
color: #fff;
transform: translateY(0);
transition: transform 180ms ease, background-color 180ms ease;
}
.button:hover {
background: #1d4ed8;
transform: translateY(-2px);
}Здесь начало маршрута — translateY(0), конец — translateY(-2px). Остановка одна, но она достаточна для легкой микроанимации.
Анимация в CSS в другой форме: ключевые свойства и их точная роль
Свойства CSS animation — это набор параметров, которые определяют длительность, направление, задержку, повторение и финальное состояние анимации. Без понимания этих параметров сложно управлять поведением анимации предсказуемо.
| Свойство | Что делает | Конкретный пример |
|---|---|---|
| animation-name | Указывает имя маршрута keyframes | card-enter |
| animation-duration | Задает длительность пути | 480ms |
| animation-timing-function | Определяет скорость между остановками | ease-out |
| animation-delay | Откладывает старт | 120ms |
| animation-iteration-count | Сколько раз пройти маршрут | 1, 3, infinite |
| animation-direction | Направление движения | normal, alternate |
| animation-fill-mode | Что оставить до/после завершения | forwards |
| animation-play-state | Запуск/пауза | paused |
Сжатая запись
.loader {
animation: pulse 1.2s ease-in-out 0s infinite alternate;
}Порядок обычно выглядит так: имя, длительность, функция времени, задержка, число повторов, направление. Браузер понимает и более гибкие комбинации, но на практике удобнее держаться предсказуемой структуры.
Что реально стоит анимировать
Лучше всего анимировать transform и opacity. Эти свойства обычно не вызывают перерасчет макета так тяжело, как width, height, top или left.
| Свойство | Подходит | Почему |
|---|---|---|
| transform | Да | Хорошо подходит для смещения, масштаба, вращения |
| opacity | Да | Идеально для появления и исчезновения |
| top/left | Нежелательно | Чаще провоцирует более тяжелые перерасчеты |
| width/height | Осторожно | Может менять поток документа и вызывать скачки |
Я почти всегда начинаю с вопроса не «какую анимацию сделать», а «какое свойство можно двигать без ущерба интерфейсу». В большинстве случаев ответ — transform и opacity, и это экономит время на последующих исправлениях.
Как устроены keyframes: конкретные остановки на временной шкале
Keyframes — это набор контрольных точек, в которых вы явно указываете состояние элемента на разных участках времени. По сути, это расписание движения между станциями внутри одной анимации.
Пример с тремя остановками
@keyframes badge-pop {
0% {
transform: scale(0.8);
opacity: 0;
}
70% {
transform: scale(1.06);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 1;
}
}Этот маршрут выглядит так:
- 0%: значок уменьшен до 80% и невидим.
- 70%: увеличен до 106% — это легкое «перелетание» через финал.
- 100%: возвращается к нормальному масштабу.
Такой прием работает потому, что мозг лучше замечает короткую динамику с «подхватом», чем абсолютно линейное появление. Это связано с особенностями зрительного восприятия движения: небольшое превышение финальной точки делает реакцию интерфейса более естественной и заметной, не перегружая пользователя.
Когда использовать from и to
Если остановок всего две, удобно писать from/to.
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}Но если у маршрута есть промежуточные станции, проценты дают больше контроля.
Плавность, скорость и timing function: как управлять ощущением движения
Timing function — это математическая кривая, которая определяет, как быстро анимация проходит путь между ключевыми кадрами. Она не меняет сам маршрут, но меняет ощущение веса, инерции и естественности движения.
Основные варианты
- linear — постоянная скорость от старта до финиша.
- ease — плавный разгон и плавное торможение.
- ease-in — медленный старт и ускорение.
- ease-out — быстрый старт и мягкая остановка.
- ease-in-out — аккуратный разгон и аккуратное замедление.
Практическая рекомендация по длительности
Для небольших интерфейсных реакций обычно хорошо работают короткие интервалы: 150–250 ms для hover и 300–500 ms для появления блоков. Более длинные анимации уместны для акцентных сценариев, но в регулярном UI они быстро начинают раздражать.
Практическое наблюдение из интерфейсной работы: пользователи редко формулируют жалобу как «слишком длинная анимация». Чаще они говорят «сайт как будто тормозит» или «кнопка срабатывает не сразу». Причина нередко именно в избыточной длительности — например, 700–900 ms для обычного появления карточки.
Я не раз замечал на тестовых макетах одну и ту же вещь: если сократить анимацию кнопки с 300 ms до 180 ms, интерфейс начинает восприниматься заметно быстрее, даже когда фактическая скорость загрузки не изменилась.
Готовые примеры CSS-анимации для кнопки, меню и загрузчика
Готовые примеры CSS-анимации помогают сразу увидеть структуру решения: имя анимации, стартовое состояние, остановки и финальный результат. Ниже — три сценария, которые часто реально используются на сайте.
1. Пульсация кнопки призыва к действию
.cta {
animation: cta-pulse 1.6s ease-in-out infinite;
}
@keyframes cta-pulse {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.35);
}
70% {
transform: scale(1.03);
box-shadow: 0 0 0 12px rgba(37, 99, 235, 0);
}
100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
}
}Маршрут: старт в обычном размере, остановка на 70% с расширением кольца, возврат к исходному состоянию. Длительность: 1.6 s. Повторы: бесконечно.
2. Выпадающее меню
.menu {
transform-origin: top center;
animation: menu-open 220ms ease-out forwards;
}
@keyframes menu-open {
0% {
opacity: 0;
transform: scaleY(0.92);
}
100% {
opacity: 1;
transform: scaleY(1);
}
}Начало: меню слегка сжато по вертикали и почти скрыто. Конец: полностью видно, нормальный масштаб. Длительность: 220 ms.
3. Точечный загрузчик
.dot {
animation: dot-bounce 600ms ease-in-out infinite alternate;
}
@keyframes dot-bounce {
0% {
transform: translateY(0);
opacity: 0.5;
}
100% {
transform: translateY(-8px);
opacity: 1;
}
}Чтобы создать «волну» из трех точек, каждой следующей задают небольшую задержку, например 120 ms и 240 ms.
Производительность, accessibility и ошибки, которые чаще всего портят эффект
Производительная и доступная CSS-анимация — это анимация, которая не тормозит интерфейс, не вызывает скачков макета и учитывает чувствительность пользователя к движению. Красивый эффект бесполезен, если из-за него страдает читаемость или удобство.
Ошибка 1. Анимация layout-свойств
Если двигать блок через top, left, width или height, можно получить лишние перерасчеты и визуальную дерготню. Безопаснее использовать transform.
Ошибка 2. Слишком много одновременных эффектов
Когда одновременно двигаются фон, тень, масштаб, размытие и фильтры у десятков карточек, страдает плавность. Лучше один акцентный прием, чем пять спорящих между собой.
Ошибка 3. Игнорирование prefers-reduced-motion
Media feature prefers-reduced-motion позволяет уменьшить или отключить выраженные движения для пользователей, которым анимация может мешать. Это важная часть доступности.
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}Подход соответствует современным практикам доступности: если человек явно указал в системе, что предпочитает меньше движения, интерфейс должен это уважать.
Ошибка 4. Неясная цель анимации
Анимация должна объяснять интерфейс, а не отвлекать от него. Хорошие эффекты показывают причину и следствие: нажал — получил отклик, открыл — увидел направление, удалил — заметил исчезновение объекта.
Чек-лист перед запуском
- Анимируются только transform, opacity или другие легкие свойства, где это возможно.
- Длительность соответствует задаче: hover короткий, появление блока умеренное.
- Есть логичный маршрут: старт, промежуточные точки, финал.
- Эффект не мешает чтению и кликам.
- Учтен prefers-reduced-motion.
- Анимация не запускается бесконечно без пользы.
Как тестировать CSS animation на реальном сайте
Тестирование CSS-анимации — это проверка того, как эффект выглядит, ощущается и влияет на интерфейс в реальных сценариях использования. Важно оценивать не только красоту движения, но и его пользу, скорость и стабильность.
Минимальный порядок проверки
- Откройте страницу на десктопе и мобильном устройстве.
- Проверьте скорость реакции на hover, click и появление блоков.
- Сравните длительность 180 ms, 250 ms и 400 ms для одного и того же эффекта.
- Убедитесь, что текст не размывается во время трансформаций.
- Проверьте, не отвлекает ли бесконечная анимация от основной задачи.
- Включите уменьшение движения в настройках системы и посмотрите, как ведет себя интерфейс.
На практике люди особенно быстро замечают две вещи: задержку после действия и раздражающую повторяемость. Если элемент мигает, пульсирует или подпрыгивает постоянно, внимание к нему падает, а не растет. Это похоже на сигнализацию у машины во дворе: первые секунды она привлекает внимание, потом ее стараются игнорировать.
Итог: как делать CSS-анимации, которые действительно улучшают сайт
CSS-анимация без JavaScript — это точный инструмент для интерфейсных эффектов, если вы задаете ей понятный маршрут, разумную длительность и корректные свойства для анимации. Лучший подход прост: используйте transition для реакций между двумя состояниями, animation и keyframes — для сценариев с несколькими остановками, а в качестве основы выбирайте transform и opacity.
Если анимация начинается в понятной точке, проходит через логичные этапы и заканчивается без визуального шума, она делает интерфейс не просто красивее, а яснее. Именно такие эффекты работают на сайте лучше всего: короткие, осмысленные, легкие для браузера и комфортные для пользователя.