Анимации в CSS — подробное руководство с примерами

Стилизация web страниц давно шагнула вперед, анимации в css возможно применять без использования javascript и его различных библиотек. С помощью css анимацией можно плавно менять размер, цвет, различные переходы и т.д.

Основная идея CSS анимаций — это плавный переход между несколькими наборами стилей, которые называются ключевыми кадрами (keyframes). Каждый ключевой кадр определяет, как должен выглядеть элемент в определённый момент. Анимации используются на сайтах для улучшения визуального восприятия, привлечения внимания, вовлечения пользователя и создания более «живых» интерфейсов.

Как сделать анимацию в CSS

Для того чтоб сделать анимацию в css достаточно двух основных шагов:

1. Описать ключевые кадры с помощью @keyframes. В этом блоке задаются изменения которые будут происходить с элементом. Например, можно сделать так чтобы блок плавно перемещался вправо или менял цвет.
2. Применить эту анимацию к элементу через свойство animation. Это свойство определяет скорость анимации, время задержки, число повторов, тип ускорения и т.д.

Рассмотрим применение анимации на примере.

/* Описываем ключевые кадры */
@keyframes move {
  from { transform: translateX(0); }
  to   { transform: translateX(200px); }
}

/* Применяем к элементу */
.element {
  width: 100px;
  height: 100px;
  border: 1px solid #cccccc;
  background: blue;
  animation: move 2s ease-in-out;
}

<div class="element"></div>

Таким образом CSS анимация в HTML получилась в виде синего квадрата, который слева будет перемещен вправо в течении двух секунд, на расстояние в 200 пикселей.

Простая анимация в CSS при наведении

Пример выше показывает что вся анимация будет происходить исключительно при загрузке страницы. Но иногда нам нужна реакция на действия пользователя, то есть, нужна анимация в css при наведении. Такие анимации обычно используют для:

• Кнопок — увеличение, подсветка.
• Ссылок — подчеркивание, смена цвета.
• Карточек товаров — увеличение или поднятие над поверхностью.
• Изображений — масштабирование или затемнение/осветление.
• Меню и различной навигации.

.button {
  padding: 12px 20px;
  background: #ff6600;
  color: white;
  transition: transform 0.3s ease, background 0.3s ease;
}

.button:hover {
  transform: scale(1.1);
  background: #ff8800;
}

.element {
  width: 100px;
  height: 100px;
  border: 1px solid #cccccc;
  background: blue;
}

<div class="element button"></div>

Таким образом при наведении мы плавно увеличили наш квадрат и изменили его цвет.

Анимация текста в CSS

Текст можно подсвечивать, выделять, перемещать или анимировать мерцание. Приведем пример мерцающего текста:

.text {
  font-size: 34px;
  color: #0000ff;
  font-size: 24px;
  animation: blink 1.5s infinite;
}

@keyframes blink {
  0%   { opacity: 1; }
  50%  { opacity: 0.3; }
  100% { opacity: 1; }
}

<div class="text">Мерцающий текст</div>

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

Анимация кнопки в CSS

Очень популярная анимация для кнопки в CSS — эффект пульсации. Кнопка увеличивается и уменьшается по циклу до бесконечности, тем самым делает кнопку более заметной для пользователя:

.pulse {
  background: #ff8800;
  color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 8px;
  cursor: pointer;
  padding: 15px 25px;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

<button class="pulse">Нажми меня</button>

С помощью этого кода мы получили оранжевую кнопку которая через анимацию изменяет свой размер и возвращается к исходному.

Анимация картинок в CSS

В анимации картинок можно применять разные сценарии, зависит от вашей фантазии и конкретной задачи. Приведем пример покачивания картинки с поворотом влево и вправо:

img {
  width: 250px;
  animation: sway 3s infinite alternate ease-in-out;
}

@keyframes sway {
  from { transform: rotate(-3deg); }
  to   { transform: rotate(3deg); }
}

<img src="imgCss.png" alt="Img">

Итоги CSS анимации без JS

Выше мы привели некоторые простые приемы анимации которые можно сделать с помощью CSS стилей. Если вам этого недостаточно, просто дайте знать об этом в комментарии мы выпустим более подробную статью и уведомим вас об этом. Покажем и расскажем более детально другие способы анимации. Приведем в пример таблицу со свойствами css анимации: