Каждый раз, когда вы наводите курсор на кнопку и она плавно меняет цвет, или когда меню выезжает сбоку — это не магия, а CSS-анимации. Они делают интерфейс отзывчивым и понятным, а ещё — просто радуют глаз. В этой статье разберём, как с помощью CSS оживить страницу, не написав ни строчки JavaScript. Поехали!

Digital-студия WNDER

Почему анимации — это не просто украшение

Представьте, что вы приходите в кафе, а официант молча ставит перед вами чашку кофе и уходит. Нормально? Вроде да, но без слов непонятно, что это — подарок или оплата. С интерфейсами та же история. Если кнопка при наведении не меняет вид, пользователь не понимает, можно ли на неё кликать. Анимация — это язык вежливого интерфейса. Она говорит: "Я тут, я живой, и я реагирую на тебя".

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

Основы CSS-анимаций: переходы и ключевые кадры

В CSS есть два главных инструмента для анимации: transition и @keyframes. Первый плавно изменяет свойства при смене состояния (например, при наведении), второй позволяет создавать сложные последовательности движения.

Transition — это как плавное торможение автомобиля. Вы задаёте, какие свойства будут меняться и за какое время. Вот простой пример для кнопки:

.button {
  background-color: #4CAF50;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #45a049;
}

Здесь при наведении цвет фона меняется не мгновенно, а плавно за 0,3 секунды. Это уже приятно глазу.

@keyframes — это как раскадровка мультфильма. Вы описываете, что происходит в каждый момент времени. Например, чтобы кнопка покачивалась:

@keyframes wobble {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

.button:hover {
  animation: wobble 0.4s ease;
}

Теперь при наведении кнопка слегка качается, привлекая внимание.

Свойства анимации: что можно настраивать

Когда вы используете animation, у вас есть несколько параметров. Вот они в таблице:

Свойство Что делает Пример
animation-name Имя ключевых кадров wobble
animation-duration Время одного цикла 0.4s
animation-timing-function Скорость изменения ease, linear, ease-in-out
animation-delay Задержка перед стартом 0.2s
animation-iteration-count Сколько раз повторять infinite или число
animation-direction Направление normal, reverse, alternate

Эти параметры можно комбинировать. Например, чтобы зациклить покачивание:

.button {
  animation: wobble 0.4s ease infinite alternate;
}

Здесь infinite — бесконечное повторение, а alternate — движение вперёд-назад.

Практические советы: как не превратить сайт в ёлку

Анимации — это мощный инструмент, но с ними легко переборщить. Вот несколько правил, которые я выработал за годы практики:

  • Длительность — 0,2–0,5 секунды. Больше — и пользователь начинает раздражаться.
  • Используйте ease-out для появления. Это значит, что элемент быстро появляется и плавно замедляется. Так ощущение естественности.
  • Не анимируйте всё подряд. Только то, что важно для взаимодействия: кнопки, переходы между состояниями, появление подсказок.
  • Уважайте prefers-reduced-motion. Некоторые люди страдают от вестибулярных расстройств. Добавьте проверку и отключайте анимации для них.
Лайфхак: Чтобы анимация не раздражала, используйте принцип «быстро нарастает — медленно затухает». Это как звук колокола: резкий удар, потом долгое эхо. В CSS это реализуется через transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1).

Пример: анимированная карточка товара

Давайте соберём всё вместе. Создадим карточку, которая плавно поднимается при наведении и показывает кнопку «Купить».

<div class="card">
  <h3>Крутой товар</h3>
  <p>Описание товара</p>
  <button class="buy-btn">Купить</button>
</div>
.card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.buy-btn {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.card:hover .buy-btn {
  opacity: 1;
  transform: translateY(0);
}

Здесь карточка приподнимается, а кнопка плавно появляется. Всё вместе создаёт ощущение интерактивности.

Что в итоге

CSS-анимации — это простой и мощный способ сделать интерфейс дружелюбным. Они помогают пользователю понять, что происходит, и делают взаимодействие приятным. Главное — знать меру и помнить о доступности.

Итак, вы научились:

  • Использовать transition для плавных изменений.
  • Создавать сложные движения с помощью @keyframes.
  • Настраивать длительность, повторения и направление.
  • Применять анимации на практике без вреда для пользователя.

Теперь идите и оживите свои интерфейсы. Только не забудьте про prefers-reduced-motion. Удачи!

Студия WNDER