Анимация увеличения и уменьшения (Zoom in Zoom Out): овладение основами CSS

Введение

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/DynamicStylingGroup(["Dynamic Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/fonts("Fonts") css/CoreLayoutGroup -.-> css/box_model("Box Model") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") css/DynamicStylingGroup -.-> css/animations("Animations") css/DynamicStylingGroup -.-> css/transformations("Transformations") subgraph Lab Skills css/selectors -.-> lab-35259{{"Анимация увеличения и уменьшения (Zoom in Zoom Out)"}} css/fonts -.-> lab-35259{{"Анимация увеличения и уменьшения (Zoom in Zoom Out)"}} css/box_model -.-> lab-35259{{"Анимация увеличения и уменьшения (Zoom in Zoom Out)"}} css/width_and_height -.-> lab-35259{{"Анимация увеличения и уменьшения (Zoom in Zoom Out)"}} css/backgrounds -.-> lab-35259{{"Анимация увеличения и уменьшения (Zoom in Zoom Out)"}} css/animations -.-> lab-35259{{"Анимация увеличения и уменьшения (Zoom in Zoom Out)"}} css/transformations -.-> lab-35259{{"Анимация увеличения и уменьшения (Zoom in Zoom Out)"}} end

Понимание структуры HTML

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

Откройте файл index.html в редакторе.
Если файл пустой или отсутствует, создайте его со следующим содержимым:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Zoom In Zoom Out Animation</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>CSS Animation Demo</h1>
    <p>This box demonstrates a zoom in zoom out animation:</p>

    <div class="zoom-in-out-box"></div>
  </body>
</html>

Поймем, что делает этот HTML:
- У нас есть стандартная структура HTML - документа с заголовком и настройками области просмотра (viewport)
- Мы подключаем внешний CSS - файл с именем style.css
- Мы включаем заголовок и абзац для объяснения нашей демонстрации
- Самое главное, у нас есть элемент <div> с классом zoom-in-out-box, который будет анимирован
Сохраните файл index.html, если вы внесли какие - либо изменения.

Этот элемент <div> станет нашей "холстом" для создания анимации. На следующем этапе мы стилизуем этот элемент с помощью CSS.

Базовое стилирование с использованием CSS

Теперь, когда у нас есть структура HTML, давайте создадим базовое стилирование CSS для нашего анимационного элемента.

Откройте файл style.css в редакторе.
Если файл пустой или отсутствует, создайте его со следующим содержимым:

body {
  font-family: Arial, sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  color: #333;
}

.zoom-in-out-box {
  margin: 24px;
  width: 50px;
  height: 50px;
  background: #f50057;
}

Поймем, что делает этот CSS:
- Мы устанавливаем базовое стилирование для страницы (шрифт, ширину и отступы)
- Мы стилизуем заголовок, задав ему темно - серый цвет
- Для нашего анимационного элемента .zoom-in-out-box мы:
  - Добавляем отступ в 24 пикселя вокруг него
  - Устанавливаем его ширину и высоту равными 50 пикселям
  - Даем ему ярко - розовый цвет фона
Сохраните файл style.css после внесения этих изменений.
Чтобы увидеть ваш прогресс, нажмите кнопку "Go Live" в правом нижнем углу VSCode. Это запустит веб - сервер на порту 8080. Затем обновите вкладку Web 8080, чтобы увидеть ваш стилизованный блок.

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

Создание анимации с использованием ключевых кадров (keyframes)

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

Откройте файл style.css еще раз и добавьте в конец следующий код:

@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}

Поймем, что делает этот код:
- @keyframes - это CSS - правило (at - rule), которое определяет этапы и стили анимации
- zoom-in-zoom-out - это имя, которое мы даем нашей анимации (мы будем ссылаться на это имя позже)
- Внутри ключевых кадров мы определяем, что происходит в разных точках анимации:
  - На 0% (начало), элемент имеет обычный размер с помощью scale(1, 1)
  - На 50% (середина анимации), элемент увеличивается в 1,5 раза с помощью scale(1.5, 1.5)
  - На 100% (конец), элемент возвращается к обычному размеру
- Свойство transform с функцией scale() изменяет размер элемента
Сохраните файл style.css после добавления этих ключевых кадров.

Ключевые кадры определяют, что будет делать наша анимация, но мы еще не применили ее к нашему элементу. На следующем этапе мы свяжем анимацию с нашим блоком.

Применение анимации

Теперь, когда мы определили наши ключевые кадры (keyframes), нам нужно применить анимацию к нашему блоку.

Откройте файл style.css еще раз и измените селектор .zoom-in-out-box следующим образом:

.zoom-in-out-box {
  margin: 24px;
  width: 50px;
  height: 50px;
  background: #f50057;
  animation: zoom-in-zoom-out 1s ease infinite;
}

Поймем, что означает свойство анимации, которое мы добавили:
- animation - это сокращенное свойство, которое одновременно устанавливает несколько свойств анимации
- zoom-in-zoom-out - это имя нашей анимации с ключевыми кадрами
- 1s указывает, что один цикл анимации длится 1 секунду
- ease - это функция времени, которая делает анимацию медленной в начале, ускоряет ее, а затем снова замедляет
- infinite означает, что анимация будет повторяться бесконечно
Сохраните файл style.css после внесения этих изменений.
Если веб - сервер уже запущен, просто обновите вкладку Web 8080. Если нет, нажмите "Go Live" в правом нижнем углу, чтобы запустить сервер, а затем откройте вкладку Web 8080.

Теперь вы должны увидеть, как ваш розовый квадрат плавно увеличивается и уменьшается в непрерывной анимации. Квадрат увеличивается до 1,5 раз от своего исходного размера, а затем уменьшается до обычного. Этот цикл повторяется бесконечно.

Эксперименты с свойствами анимации

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

Откройте файл style.css и измените селектор .zoom-in-out-box, чтобы попробовать разные свойства анимации:

.zoom-in-out-box {
  margin: 24px;
  width: 50px;
  height: 50px;
  background: #f50057;
  animation: zoom-in-zoom-out 2s ease-in-out infinite;
  /* Add a slight rotation during the animation */
  border-radius: 10px;
}

Поймем, что мы изменили:
- Мы увеличили продолжительность анимации до 2s (2 секунды)
- Мы изменили функцию времени на ease-in-out, которая делает как начало, так и конец анимации плавными
- Мы добавили border-radius в 10 пикселей, чтобы сделать углы нашего блока закругленными
Также изменим наши ключевые кадры (keyframes), чтобы добавить эффект вращения:

@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1) rotate(0deg);
  }
  50% {
    transform: scale(1.5, 1.5) rotate(45deg);
    background-color: #2196f3;
  }
  100% {
    transform: scale(1, 1) rotate(0deg);
  }
}

В этом обновленном определении ключевых кадров:
- Мы добавили функцию rotate() к свойству transform
- На отметке 50% элемент теперь вращается на 45 градусов при увеличении
- Мы также изменили цвет фона на синий на отметке 50%
Сохраните файл style.css после внесения этих изменений.
Обновите вкладку Web 8080, чтобы увидеть улучшенную анимацию.

Теперь ваша анимация должна быть медленнее (2 секунды на цикл), иметь закругленные углы, вращаться при увеличении и изменять цвет посередине анимации. Это демонстрирует, как анимации CSS могут комбинировать несколько изменений свойств для создания богатых визуальных эффектов.

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

Резюме

Поздравляем вас с успешным завершением лабораторной работы по анимации "Увеличение и уменьшение" (Zoom in Zoom Out Animation)! В этой лабораторной работе вы узнали:

Как структурировать HTML для анимации CSS
Как стилизовать элементы с использованием базовых свойств CSS
Как создавать анимации с ключевыми кадрами (keyframes), которые определяют этапы анимации
Как применять анимации к элементам с использованием свойства animation
Как настраивать анимации, регулируя время, плавность и комбинируя несколько изменений свойств

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

Для продолжения своего обучения рассмотрите возможность изучения других свойств анимации, таких как animation-delay, animation-direction и animation-fill-mode. Вы также можете поэкспериментировать с анимацией различных свойств CSS, помимо transform, таких как opacity, position и size.