Простые CSS анимации, которые оживят ваш сайт

Иногда даже одно лёгкое движение может сделать сайт запоминающимся. Не нужно быть мастером фронтенда, чтобы добавить немного магии в интерфейс — иногда достаточно пары строк CSS. Простые анимации делают сайт динамичным, визуально приятным и интуитивно понятным: кнопки становятся отзывчивыми, элементы появляются с грацией, а страницы начинают «дышать».

В этой статье мы рассмотрим простые и универсальные CSS-анимации, которые легко внедрить, но при этом они кардинально улучшают пользовательский опыт. Не будет ни сложных библиотек, ни JavaScript — только чистый CSS.

Основы CSS-анимации

CSS-анимации строятся на нескольких ключевых возможностях языка, которые позволяют делать элементы интерактивными и живыми без использования JavaScript. Вот основные из них:

Псевдокласс :hover

Этот псевдокласс активируется, когда пользователь наводит курсор на элемент. В сочетании с изменением стилей он позволяет легко реализовать базовые анимации. Например, изменение цвета кнопки при наведении или лёгкое увеличение изображения.

Свойство transition

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

Вместе с :hover это даёт простой способ оживить интерфейс — всё, что вам нужно, это начальное и конечное состояние, и CSS сам сделает остальное.

Свойство animation и @keyframes

Если вам нужно более сложное поведение — например, чтобы элемент «подпрыгивал», пульсировал или вращался — на помощь приходит @keyframes и свойство animation. С их помощью можно описать последовательность кадров анимации и применить её к элементу.

Анимации на @keyframes хороши тем, что они не требуют взаимодействия с пользователем и могут запускаться сами по себе — например, при загрузке страницы.

CSS анимации

Теперь, когда мы прошли небольшой вводный курс по анимации, займемся наконец-то делом. Для удобства я разбил анимации на группы.

Наведение и клики

• Изменение цвета кнопки при наведении (:hover)
• Плавное увеличение/уменьшение при наведении (transform: scale)
• Поднятие элемента с тенью (box-shadow)
• Поворот иконки при наведении
• Нажатие с эффектом «нажатой кнопки» (scale, translateY)

Анимации при загрузке/появлении

• Плавное появление элемента (opacity + transform)
• Слайд-ин: элемент «въезжает» с края
• Анимация загрузки (например, спиннер)
• Пульсация (эффект «дышит»)
• Мигание (например, для курсора)

Декоративные и attention-grabbing

• Мерцание/свечение (box-shadow + @keyframes)
• Трясущаяся кнопка (эффект вибрации)
• Прыгающий элемент (bounce)
• Медленное вращение (например, для логотипа)
• Плавающее движение вверх-вниз (float)

Эффекты для текста

• Плавное появление текста по буквам
• Изменение цвета текста при наведении
• Мерцание текста
• Анимация подчеркивания (например, при hover)
• Бегущая строка (marquee-like эффект)