Создайте CSS3-анимации с использованием ключевых кадров

Введение

В этом практическом занятии студенты познакомятся с миром CSS3-анимаций, освоив мощный правил @keyframes и техники анимации. Курс представляет собой комплексное исследование создания динамических веб-анимаций, с акцентом на понимание синтаксиса ключевых кадров, определение свойств анимации и реализацию продвинутых эффектов анимации без использования JavaScript.

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

Разобраться с синтаксисом ключевых кадров CSS3-анимации

В этом шаге вы узнаете о фундаментальном синтаксисе ключевых кадров CSS3-анимации, которые являются строительными блоками для создания динамических веб-анимаций. CSS-анимации позволяют плавно преобразовывать элементы из одного стиля в другой без использования JavaScript.

Давайте начнем с понимания базового синтаксиса CSS-ключевых кадров. Откройте WebIDE и создайте новый файл под названием styles.css в директории ~/project.

CSS-анимации с ключевыми кадрами определяются с использованием правила @keyframes, которое задает поведение анимации на различных этапах анимационной последовательности. Вот простой пример, демонстрирующий синтаксис:

@keyframes moveRight {
  /* Начальное состояние (0% или "from") */
  from {
    transform: translateX(0);
  }

  /* Конечное состояние (100% или "to") */
  to {
    transform: translateX(300px);
  }
}

В этом примере moveRight - это имя анимации, и оно определяет, как элемент будет перемещаться из исходной позиции на 300 пикселей вправо.

Вы также можете использовать процентные значения для ключевых кадров для более сложных анимаций:

@keyframes colorChange {
  0% {
    background-color: red;
  }
  50% {
    background-color: green;
  }
  100% {
    background-color: blue;
  }
}

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

Основные моменты, которые нужно помнить о синтаксисе ключевых кадров:

Используйте @keyframes, за которым следует уникальное имя анимации
Определяйте состояния с использованием from/to или процентных значений
Указывайте свойства CSS, которые будут анимироваться на каждом этапе

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

[Элемент div плавно движется слева направо]
[Элемент div меняет цвет от красного до зеленого и до синего]

Определить базовую анимацию с использованием правила @keyframes

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

Сначала создадим HTML-файл, чтобы продемонстрировать нашу анимацию. Откройте WebIDE и создайте новый файл под названием index.html в директории ~/project:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Basic CSS Animation</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="animated-box"></div>
  </body>
</html>

Теперь обновим файл styles.css, который мы создали ранее, более детальной анимацией:

.animated-box {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: relative;
}

@keyframes moveAndResize {
  0% {
    /* Начальное состояние */
    transform: translateX(0) scale(1);
    background-color: blue;
  }

  50% {
    /* Середина анимации */
    transform: translateX(200px) scale(1.5);
    background-color: green;
  }

  100% {
    /* Конечное состояние */
    transform: translateX(400px) scale(1);
    background-color: red;
  }
}

Рассмотрим правило @keyframes:

Мы определяем анимацию под названием moveAndResize
При 0% (начало) коробка находится в исходном положении
При 50% (середина) коробка перемещается на 200px вправо и увеличивается в размере
При 100% (конец) коробка перемещается на 400px вправо и возвращается к исходному размеру

Пример вывода:

[Синий квадрат, который:
 - Перемещается слева направо
 - Изменяет размер от нормального до большего и обратно
 - Меняет цвет от синего до зеленого и до красного]

Этот пример демонстрирует, как:

Создать многоэтапную анимацию
Использовать процентные значения для ключевых кадров
Объединить несколько преобразований (перемещение и масштабирование)
Менять цвет во время анимации

Применить свойства анимации к HTML-элементам

В этом шаге вы узнаете, как применить свойства анимации к HTML-элементам, чтобы сделать ваши анимации с ключевыми кадрами живыми. Мы изменим предыдущий файл styles.css, чтобы добавить специфические свойства анимации, которые контролируют, как анимация ведет себя.

Обновите файл styles.css следующим CSS:

.animated-box {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: relative;

  /* Свойства анимации */
  animation-name: moveAndResize; /* Имя анимации с ключевыми кадрами */
  animation-duration: 3s; /* Общее время одного цикла анимации */
  animation-timing-function: ease-in-out; /* гладкое ускорение и замедление */
  animation-delay: 1s; /* Подождать 1 секунду перед началом */
}

@keyframes moveAndResize {
  0% {
    transform: translateX(0) scale(1);
    background-color: blue;
  }

  50% {
    transform: translateX(200px) scale(1.5);
    background-color: green;
  }

  100% {
    transform: translateX(400px) scale(1);
    background-color: red;
  }
}

Объяснение основных свойств анимации:

animation-name: связывает элемент с определенным правилом @keyframes
animation-duration: задает общее время для одного полного цикла анимации
animation-timing-function: контролирует кривую скорости анимации
animation-delay: задает период ожидания перед началом анимации

Вы также можете использовать сокращенное свойство animation, чтобы объединить эти свойства:

.animated-box {
  animation: moveAndResize 3s ease-in-out 1s;
}

Пример вывода:

[Синий квадрат, который:
 - Ждет 1 секунду перед началом
 - гладко перемещается слева направо
 - постепенно изменяет размер и цвет
 - занимает 3 секунды для завершения одного цикла анимации]

Настроить время и повторение анимации

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

Обновите файл styles.css следующим CSS:

.animated-box {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: relative;

  /* Настройте свойства анимации */
  animation-name: moveAndResize;
  animation-duration: 3s;
  animation-timing-function: cubic-bezier(0.5, 0.1, 0.3, 1);
  animation-iteration-count: 3; /* Повторите анимацию 3 раза */
  animation-direction: alternate; /* Меняйте направление при каждой итерации */
  animation-fill-mode: forwards; /* Сохраняйте конечное состояние после анимации */
}

@keyframes moveAndResize {
  0% {
    transform: translateX(0) scale(1);
    background-color: blue;
  }

  100% {
    transform: translateX(400px) scale(1.5);
    background-color: red;
  }
}

Основные свойства настройки анимации:

animation-timing-function: Управляет кривой скорости (например, cubic-bezier() для настройки ускорения)
animation-iteration-count: Определяет, сколько раз анимация повторяется
animation-direction: Определяет направление воспроизведения анимации
animation-fill-mode: Указывает, как стили применяются до/после анимации

Вы также можете использовать сокращенное свойство animation:

.animated-box {
  animation: moveAndResize 3s cubic-bezier(0.5, 0.1, 0.3, 1) 3 alternate
    forwards;
}

Пример вывода:

[Синий квадрат, который:
 - Перемещается и изменяет размер 3 раза
 - Меняет направление при каждой итерации
 - Использует настраиваемую кривую скорости
 - Остается в конечном положении после анимации]

Пробовать более продвинутые анимационные эффекты

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

Обновите файл index.html, чтобы включить несколько анимированных элементов:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Advanced CSS Animations</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="circle circle1"></div>
      <div class="circle circle2"></div>
      <div class="circle circle3"></div>
    </div>
  </body>
</html>

Замените содержимое styles.css следующей более продвинутой анимацией:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  opacity: 0.7;
}

.circle1 {
  background-color: #ff6b6b;
  animation: orbit1 4s infinite linear;
}

.circle2 {
  background-color: #4ecdc4;
  animation: orbit2 4s infinite linear;
}

.circle3 {
  background-color: #45b7d1;
  animation: orbit3 4s infinite linear;
}

@keyframes orbit1 {
  0% {
    transform: rotate(0deg) translateX(150px) rotate(0deg);
  }
  100% {
    transform: rotate(360deg) translateX(150px) rotate(-360deg);
  }
}

@keyframes orbit2 {
  0% {
    transform: rotate(120deg) translateX(200px) rotate(-120deg);
  }
  100% {
    transform: rotate(480deg) translateX(200px) rotate(-480deg);
  }
}

@keyframes orbit3 {
  0% {
    transform: rotate(240deg) translateX(250px) rotate(-240deg);
  }
  100% {
    transform: rotate(600deg) translateX(250px) rotate(-600deg);
  }
}

Показанные более продвинутые методы анимации:

Несколько анимаций одновременно
Сложные вращения и перемещения
Бесконечная анимация с линейным временем
Отстающий орбитальный движок
Изменение непрозрачности и цвета

Пример вывода:

[Три цветных круга вращаются вокруг центральной точки
 - Круги движутся на разных расстояниях
 - Непрерывное, гладкое вращение
 - Перекрывающийся, полупрозрачный эффект]

Резюме

В этом практическом занятии участники изучили основы ключевых кадров CSS3-анимации, научились создавать динамические веб-анимации без использования JavaScript. Основное внимание уделялось пониманию синтаксиса правила @keyframes, которое позволяет разработчикам определять сложные последовательности анимации с использованием процентных значений или состояний from/to. Участники узнали задавать поведение анимации путём трансформации CSS-свойств, таких как позиция, цвет и размер, на различных этапах последовательности анимации.

Практические упражнения помогли ученикам создать базовые и продвинутые анимационные эффекты, включая перемещение элементов по экрану, изменение цветов и настройку времени и повторений анимации. 通过实验不同的关键帧配置，参与者获得了实践经验，能够制作出流畅、引人入胜的网页动画，增强用户界面的交互性和视觉吸引力。

通过尝试不同的关键帧配置，参与者获得了实践经验，能够制作出流畅、引人入胜的网页动画，增强用户界面的交互性和视觉吸引力。