Иногда даже одно лёгкое движение может сделать сайт запоминающимся. Не нужно быть мастером фронтенда, чтобы добавить немного магии в интерфейс — иногда достаточно пары строк CSS. Простые анимации делают сайт динамичным, визуально приятным и интуитивно понятным: кнопки становятся отзывчивыми, элементы появляются с грацией, а страницы начинают «дышать».
В этой статье мы рассмотрим простые и универсальные CSS-анимации, которые легко внедрить, но при этом они кардинально улучшают пользовательский опыт. Не будет ни сложных библиотек, ни JavaScript — только чистый CSS.
Основы CSS-анимации
CSS-анимации строятся на нескольких ключевых возможностях языка, которые позволяют делать элементы интерактивными и живыми без использования JavaScript. Вот основные из них:
Псевдокласс :hover
Этот псевдокласс активируется, когда пользователь наводит курсор на элемент. В сочетании с изменением стилей он позволяет легко реализовать базовые анимации. Например, изменение цвета кнопки при наведении или лёгкое увеличение изображения.
|
1 2 3 4 |
button:hover { background-color: #ff6600; transform: scale(1.05); } |
Свойство transition
transition позволяет анимировать изменение одного или нескольких CSS-свойств. Вместо того, чтобы стиль менялся мгновенно, вы можете задать плавный переход — указав, что именно должно меняться, за какое время и с какой функцией.
|
1 2 3 |
button { transition: background-color 0.3s ease, transform 0.3s ease; } |
Вместе с :hover это даёт простой способ оживить интерфейс — всё, что вам нужно, это начальное и конечное состояние, и CSS сам сделает остальное.
Свойство animation@keyframes
animationЕсли вам нужно более сложное поведение — например, чтобы элемент «подпрыгивал», пульсировал или вращался — на помощь приходит @keyframes и свойство animation. С их помощью можно описать последовательность кадров анимации и применить её к элементу.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } .pulsing { animation: pulse 1s infinite; } |
Анимации на @keyframes хороши тем, что они не требуют взаимодействия с пользователем и могут запускаться сами по себе — например, при загрузке страницы.
CSS анимации
Теперь, когда мы прошли небольшой вводный курс по анимации, займемся наконец-то делом. Для удобства я разбил анимации на группы.
Наведение и клики
- Изменение цвета кнопки при наведении (
:hover) - Плавное увеличение/уменьшение при наведении (
transform: scale) - Поднятие элемента с тенью (
box-shadow) - Поворот иконки при наведении
- Нажатие с эффектом «нажатой кнопки» (
scale,translateY)
Анимации при загрузке/появлении
- Плавное появление элемента (
opacity + transform) - Слайд-ин: элемент «въезжает» с края
- Анимация загрузки (например, спиннер)
- Пульсация (эффект «дышит»)
- Мигание (например, для курсора)
Декоративные и attention-grabbing
- Мерцание/свечение (
box-shadow+@keyframes) - Трясущаяся кнопка (эффект вибрации)
- Прыгающий элемент (bounce)
- Медленное вращение (например, для логотипа)
- Плавающее движение вверх-вниз (float)
Эффекты для текста
- Плавное появление текста по буквам
- Изменение цвета текста при наведении
- Мерцание текста
- Анимация подчеркивания (например, при
hover) - Бегущая строка (marquee-like эффект)
