Зачем вообще делать анимации на CSS
Многие новички думают, что любые анимации на сайте — это обязательно JavaScript.
На самом деле CSS умеет очень многое:
- работает быстрее, чем JS-анимации
- не нагружает сайт
- проще в поддержке
- идеально подходит для интерфейсных эффектов
Большая часть UI-анимаций делается именно на CSS.
В этой статье разберём:
- какие анимации можно делать без JS
- базовые и более интересные примеры
- где это реально применяется на сайтах
1. Плавные hover-эффекты (основа всего)
Начнём с самого простого, но очень важного.
Пример: кнопка с плавным наведением
Что здесь происходит
- transition говорит браузеру: анимируй изменения
- при наведении:
меняется цвет
кнопка слегка поднимается вверх
Где применяется
- кнопки
- карточки товаров
- элементы меню
- любые кликабельные элементы
Это must-have для любого сайта.
2. Анимация появления элементов (fade-in)
Очень популярный эффект — когда элементы плавно появляются.
Пример: плавное появление блока
Объяснение
- элемент изначально:
прозрачный
чуть смещён вниз - анимация:
делает его видимым
возвращает на место
Где используется
- заголовки на лендингах
- блоки преимуществ
- карточки услуг
- тексты при загрузке страницы
💡 Часто используется без JS, просто при загрузке страницы.
3. Пульсация (акцент на важном)
Иногда нужно привлечь внимание пользователя.
Пример: пульсирующая кнопка
Что делает эта анимация
- кнопка слегка увеличивается
- потом возвращается назад
- и так по кругу
Где применять
- кнопка «Заказать»
- CTA-блоки
- уведомления
- акционные элементы
⚠️ Важно: не злоупотреблять, иначе будет раздражать.
4. Анимация загрузки (loader)
Даже загрузчики можно сделать полностью на CSS.
Пример: простой спиннер
Как это работает
- обычный круг с границей
- верхняя часть другого цвета
- круг постоянно вращается
Где используется
- загрузка данных
- ожидание ответа сервера
- экраны загрузки
5. Анимация карточек (hover + transform)
Очень популярный приём в современных интерфейсах.
Пример: карточка с подъёмом
Объяснение
- карточка кажется «живой»
- создаётся ощущение глубины
- интерфейс выглядит современно
Где применяется
- каталоги
- портфолио
- карточки услуг
- блоги
6. Анимация текста (микроэффекты)
CSS отлично подходит и для текста.
Пример: подчёркивание при наведении
Что происходит
- при наведении линия «рисуется» слева направо
- выглядит аккуратно и современно
Где использовать
- ссылки
- меню
- навигация
- футер
7. Почему CSS-анимации — это правильно
Плюсы
- быстрее, чем JS
- меньше кода
- лучше для SEO и производительности
- проще для новичков
Когда CSS не подойдёт
- сложная логика
- зависимость от данных
- интерактивные сцены
В остальных случаях CSS — лучший выбор.
Итог
Если вы только начинаете:
- начните с transition
- изучите transform
- разберитесь с @keyframes
CSS-анимации:
- делают сайт живым
- не перегружают код
- сильно улучшают UX
В следующей статье мы пойдём ещё глубже и разберём скрытые возможности CSS, о которых мало кто знает и которые реально используют в продакшене.