Магия CSS: как оживить свой сайт с помощью анимации

Что такое "магия" CSS?

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

С их помощью вы можете:

• Сделать кнопки, которые плавно меняют цвет или размер при наведении.
• Добавить блокам с контентом эффект плавного появления на экране.
• Создать иконки, которые привлекают внимание пользователя.

Что такое CSS анимация и зачем она нужна?

Способ №1: transition — магия плавных переходов

Что такое "переход" (transition)?

Четыре главных свойства transition

Собираем всё вместе: короткая запись

/* transition: [что меняем] [как долго] [характер] [задержка]; */
.element {
  transition: background-color 0.5s ease-in-out 0.1s;
}

Важный совет: Если вам нужно задать разную длительность для разных свойств, просто перечислите их через запятую: transition: background-color 1s, transform 0.5s;

💻 Практика: оживляем кнопку

Шаг 1. HTML (наша кнопка)

<button class="animated-btn">
  Наведи на меня!
</button>

Шаг 2. CSS (вся магия тут)

/* Стили для самой кнопки в обычном состоянии */
.animated-btn {
  background-color: #3498db; /* Синий фон */
  color: white;              /* Белый текст */
  padding: 15px 30px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer; /* Меняем курсор на "руку" */
  
  /* * ВОТ ГЛАВНАЯ СТРОКА!
   * Мы говорим: "Следи за ИЗМЕНЕНИЕМ фона и свойства transform.
   * Если они изменятся, сделай это плавно за 0.3 секунды"
   */
  transition: background-color 0.3s ease, transform 0.3s ease; /* [cite: 61] */
}

/* Стили для кнопки, КОГДА на нее навели мышь */
.animated-btn:hover {
  background-color: #2980b9; /* Делаем фон темнее */
  
  /* * Увеличиваем кнопку на 10%
   * transform — это свойство для трансформаций: 
   * поворота, сдвига и масштабирования.
   */
  transform: scale(1.1); /* [cite: 62] */
}

Способ №2: animation и @keyframes — создаем свой "мультфильм"

Процесс состоит из двух шагов:

1. Создать "сценарий" с помощью правила @keyframes.
2. Назначить этот сценарий элементу с помощью свойства animation.

Шаг 1. Сценарий: @keyframes (ключевые кадры)

@keyframes slide-in {
  from {
    transform: translateX(-100px); /* Начать слева за экраном */
  }
  to {
    transform: translateX(0); /* Закончить в своей позиции */
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);   /* Исходный размер */
  }
  50% {
    transform: scale(1.1); /* Немного увеличиться */
  }
  100% {
    transform: scale(1);   /* Вернуться в исходный размер */
  }
}

Шаг 2. Запуск: Свойство animation

/* animation: [имя] [длительность] [характер] [задержка] [повторы] [направление]; */
.my-element {
  animation: pulse 2s ease-in-out 0s infinite alternate;
}

💻 Практика: Заставляем иконку "дышать"

Шаг 1. HTML

<div class="breathing-icon">
  🚀
</div>

Шаг 2. CSS

/* 1. Сам "рецепт" анимации */
@keyframes pulse {
  /* В начале (0%) и в конце (100%) 
     анимации элемент в исходном размере */
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  /* В середине анимации (50%) 
     он будет на 15% больше и чуть прозрачнее */
  50% {
    transform: scale(1.15);
    opacity: 0.8;
  }
}

/* 2. Стили для иконки и "запуск" анимации */
.breathing-icon {
  font-size: 50px; /* Просто чтобы иконка была большой */
  
  /* * А ВОТ И ЗАПУСК!
   * Имя: pulse
   * Длительность: 2 секунды на 1 цикл
   * Характер: ease-in-out (плавное начало и конец)
   * Повторы: infinite (бесконечно)
   */
  animation: pulse 2s ease-in-out infinite; /* */
}

Больше идей для вашей CSS-магии

Анимация загрузки (Spinner)

Плавное появление элементов

Пульсирующий заголовок

Движущиеся фоновые элементы

Анимация — это специя. Как не испортить сайт?

Магия в ваших руках!

Что дальше?