Анимация ключевых кадров в CSS предоставляет возможность создавать сложные и интересные анимации для веб-страниц. Этот подход основывается на определении промежуточных состояний элемента в течение времени, что позволяет создавать плавные переходы между этими состояниями. В этой статье мы рассмотрим основы работы с анимацией ключевых кадров в CSS и рассмотрим примеры ее использования.

Введение в анимацию ключевых кадров

Анимация ключевых кадров позволяет определить набор ключевых состояний элемента в течение времени и создать плавные переходы между этими состояниями. Каждый ключевой кадр описывает состояние элемента в определенный момент времени. Мы определяем набор ключевых кадров, и браузер автоматически интерполирует промежуточные состояния, создавая плавные анимации.

Создание ключевых кадров

Для создания анимации ключевых кадров мы используем правило @keyframes. Синтаксис для определения ключевых кадров выглядит следующим образом:

@keyframes animationName {
  0% {
    /* свойства для начального состояния */
  }
  50% {
    /* свойства для промежуточного состояния */
  }
  100% {
    /* свойства для конечного состояния */
  }
}

Мы определяем имя анимации (animationName) и задаем набор ключевых кадров с указанием временных отметок. В каждом ключевом кадре мы указываем необходимые свойства для данного состояния элемента.

Применение анимации к элементу

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

.element {
  animation-name: animationName;
  animation-duration: 2s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  /* другие параметры анимации */
}

В данном примере мы применяем анимацию с именем animationName к элементу с классом .element. Указываем продолжительность анимации (animation-duration) в 2 секунды, задержку (animation-delay) в 1 секунду и количество повторений (animation-iteration-count) равное infinite (бесконечное число повторений).

Примеры использования анимации ключевых кадров

Пульсирующая анимация

Давайте рассмотрим пример создания простой пульсирующей анимации для кнопки. В этой анимации кнопка будет медленно увеличиваться в размере, а затем возвращаться к исходному размеру, создавая эффект пульсации.

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

.button {
  animation-name: pulse;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

Мы создаем ключевые кадры для анимации pulse. На 0% кнопка имеет нормальный размер (transform: scale(1)), на 50% она увеличивается до 1.2 раза (transform: scale(1.2)), а на 100% возвращается к исходному размеру. Затем мы применяем эту анимацию к кнопке с классом .button.

Переливающийся фон

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

@keyframes gradientBackground {
  0% {
    background-color: #ff0000;
  }
  50% {
    background-color: #00ff00;
  }
  100% {
    background-color: #0000ff;
  }
}

.container {
  animation-name: gradientBackground;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

Мы создаем ключевые кадры для анимации gradientBackground, где каждый кадр задает различный цвет фона контейнера. На 0% фон красный (background-color: #ff0000), на 50% – зеленый (background-color: #00ff00), а на 100% – синий (background-color: #0000ff). Затем мы применяем эту анимацию к контейнеру с классом .container.