Карта сайта

Урок 29: CSS-анимации

/Уроки по HTML/CSS/Урок 29: CSS-анимации
Урок 29: CSS-анимации
Автор: написал в рубрике Уроки по HTML/CSS. 0 Комментариев.

На 29-м уроке мы подошли к одному из самых захватывающих уроков в нашем курсе, к CSS-анимациям. Если вы мечтали оживить свои веб-страницы, добавить плавные переходы или даже создать мини-игры, то сегодняшний материал станет вашим ключом к этому миру. Мы разберем синтаксис @keyframes, научимся создавать простые анимации и закрепим знания практическими задачами.

Что такое CSS-анимации?

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

Синтаксис @keyframes

Основу любой CSS-анимации составляют ключевые кадры @keyframes. Это правило определяет, какие стили будут применены к элементу в определенные моменты времени.

Синтаксис выглядит так:

@keyframes имя-анимации {
  from {
    /* Стили в начале анимации */
  }
  to {
    /* Стили в конце анимации */
  }
}

Или с использованием процентов для более детального контроля:

@keyframes имя-анимации {
  0% {
    /* Стили на старте */
  }
  50% {
    /* Стили на середине */
  }
  100% {
    /* Стили в конце */
  }
}

Важно:

  • Имя анимации должно быть уникальным (например, fadeIn, slideRight).
  • Проценты (0%, 50%, 100%) позволяют задавать любое количество промежуточных состояний.
  • Если не указать 0% или 100%, браузер возьмет текущие стили элемента.

Как применить анимацию к элементу

После создания @keyframes нужно связать анимацию с элементом через свойство animation. Его структура:

.element {
  animation: 
    имя-анимации 
    длительность 
    функция-времени 
    задержка 
    количество-повторов 
    направление 
    fill-mode;
}

Пример:

.box {
  width: 100px;
  height: 100px;
  background: blue;
  animation: slide 2s ease-in-out infinite;
}

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(300px);
  }
}

Здесь квадрат будет бесконечно двигаться вправо каждые 2 секунды с плавным ускорением и замедлением.

Простые примеры анимаций

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

Пример 1: Появление элемента (Fade In)

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.element {
  animation: fadeIn 1.5s ease-out;
}

Пример 2: Вращение

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.loader {
  animation: spin 2s linear infinite;
}

Пример 3: Пульсация

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

.button {
  animation: pulse 1.5s ease-in-out infinite;
}

Практические задачи

Решите эти задачи, чтобы закрепить материал.

Задача 1: Движение по квадрату

Создайте анимацию, при которой элемент перемещается по траектории квадрата (0 → 200px вправо → 200px вниз → 200px влево → обратно в начало).

Подсказка: Используйте проценты и transform: translate().

Задача 2: Меняющийся фон

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

Подсказка: Задайте ключевые кадры на 0%, 50% и 100%.

Задача 3: Комбинированная анимация

Объедините вращение и увеличение размера элемента. Например, элемент должен вращаться и одновременно увеличиваться в два раза.

Советы по работе с анимациями

  1. Не злоупотребляйте анимациями. Слишком много движения может раздражать пользователей.
  2. Используйте will-change для оптимизации. Это свойство подсказывает браузеру, какие свойства будут анимироваться, чтобы он подготовился: 
    .element {
  will-change: transform, opacity;
}
  3. Тестируйте на разных устройствах. Некоторые анимации могут тормозить на мобильных гаджетах.

Если вы хотите освоить веб-разработку с нуля, переходите по ссылке: HTML и CSS для начинающих. Там вас ждут все 30 уроков, дополнительные материалы и поддержка от меня лично!

Чем больше экспериментов, тем быстрее вы освоите анимации.