Создание сложных анимаций: Тренажер CSS

Тренажер по CSS для пользователей с начальным уровнем подготовки.

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

Список тем

Определение базовой анимации @keyframes

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

CSS

/* Определите анимацию здесь */
input1 colorChange {
  input2 {
    background-color: red;
  }
  input3 {
    background-color: blue;
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: red; /* Начальный цвет */
  /* Применение анимации будет в следующем задании */
}

                     /* Определите анимацию здесь */
input1 colorChange {
  input2 {
    background-color: red;
  }
  input3 {
    background-color: blue;
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: red; /* Начальный цвет */
  /* Применение анимации будет в следующем задании */
}

HTML

<div class="box"></div>

Используйте правило `@keyframes`, чтобы определить анимацию. Дайте ей имя, например, 'colorChange'. Внутри правила используйте селекторы `from` (или `0%`) и `to` (или `100%`) для указания начального и конечного состояний. В каждом состоянии задайте свойство `background-color`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

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

Теперь примените созданную в предыдущем шаге анимацию 'colorChange' к элементу `.box`. Установите длительность анимации 3 секунды и сделайте так, чтобы она повторялась бесконечно.

CSS

@keyframes colorChange {
  from {
    background-color: red;
  }
  to {
    background-color: blue;
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  input1: colorChange;
  input2: 3s;
  input3: infinite;
}

                     @keyframes colorChange {
  from {
    background-color: red;
  }
  to {
    background-color: blue;
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  input1: colorChange;
  input2: 3s;
  input3: infinite;
}

HTML

<div class="box"></div>

Используйте свойство `animation-name` для указания имени анимации ('colorChange'). Свойство `animation-duration` задает длительность одного цикла (например, '3s'). Чтобы анимация повторялась бесконечно, используйте свойство `animation-iteration-count` со значением `infinite`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Управление направлением и режимом заполнения

Модифицируйте анимацию элемента `.box` так, чтобы она проигрывалась сначала вперед, потом назад (чередовалась). Также сделайте так, чтобы после завершения анимации элемент оставался в конечном состоянии последнего цикла.

CSS

@keyframes colorChange {
  from {
    background-color: red;
  }
  to {
    background-color: blue;
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: colorChange;
  animation-duration: 3s;
  animation-iteration-count: 2; /* Изменено для наглядности fill-mode */
  input1: alternate;
  input2: forwards;
}

                     @keyframes colorChange {
  from {
    background-color: red;
  }
  to {
    background-color: blue;
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: colorChange;
  animation-duration: 3s;
  animation-iteration-count: 2; /* Изменено для наглядности fill-mode */
  input1: alternate;
  input2: forwards;
}

HTML

<div class="box"></div>

Используйте свойство `animation-direction` со значением `alternate` для чередования направления. Чтобы элемент сохранял стили последнего ключевого кадра после завершения, используйте `animation-fill-mode` со значением `forwards`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Анимация трансформации: Вращение

Создайте анимацию 'spin', которая вращает элемент на 360 градусов. Примените эту анимацию к элементу `.spinner` так, чтобы она длилась 2 секунды, повторялась бесконечно и имела линейную временную функцию.

CSS

input1 spin {
  from {
    input2: rotate(0deg);
  }
  to {
    input2: rotate(360deg);
  }
}

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid lightblue;
  border-top-color: blue;
  border-radius: 50%;
  margin: 20px;
  animation-name: spin;
  animation-duration: 2s;
  input3: infinite;
  input4: linear;
}

                     input1 spin {
  from {
    input2: rotate(0deg);
  }
  to {
    input2: rotate(360deg);
  }
}

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid lightblue;
  border-top-color: blue;
  border-radius: 50%;
  margin: 20px;
  animation-name: spin;
  animation-duration: 2s;
  input3: infinite;
  input4: linear;
}

HTML

<div class="spinner"></div>

Определите `@keyframes spin`. Внутри используйте `from { transform: rotate(0deg); }` и `to { transform: rotate(360deg); }`. Примените анимацию к `.spinner` с помощью свойств `animation-name`, `animation-duration`, `animation-iteration-count` (`infinite`) и `animation-timing-function` (`linear`).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Приостановка и возобновление анимации

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

CSS

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

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid lightblue;
  border-top-color: blue;
  border-radius: 50%;
  margin: 20px;
  animation: spin 2s infinite linear;
  /* Сокращенная запись анимации */
}

.spinner:input1 {
  input2: paused;
}

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

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid lightblue;
  border-top-color: blue;
  border-radius: 50%;
  margin: 20px;
  animation: spin 2s infinite linear;
  /* Сокращенная запись анимации */
}

.spinner:input1 {
  input2: paused;
}

HTML

<div class="spinner"></div>

Используйте псевдокласс `:hover` для элемента `.spinner`. Внутри этого правила установите свойство `animation-play-state` в значение `paused`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Анимация с несколькими ключевыми кадрами

Создайте анимацию 'pulse', которая заставляет элемент увеличиваться до 1.2 от исходного размера в середине анимации, а затем возвращаться к исходному размеру. Анимация должна длиться 1.5 секунды и повторяться бесконечно.

CSS

@keyframes pulse {
  input1 {
    transform: scale(1);
  }
  input2 {
    transform: scale(1.2);
  }
  input3 {
    transform: scale(1);
  }
}

.pulsing-heart {
  font-size: 50px; /* Размер иконки */
  color: red;
  display: inline-block; /* Чтобы transform работал */
  margin: 30px;
  animation-name: pulse;
  input4: 1.5s;
  input5: infinite;
}

                     @keyframes pulse {
  input1 {
    transform: scale(1);
  }
  input2 {
    transform: scale(1.2);
  }
  input3 {
    transform: scale(1);
  }
}

.pulsing-heart {
  font-size: 50px; /* Размер иконки */
  color: red;
  display: inline-block; /* Чтобы transform работал */
  margin: 30px;
  animation-name: pulse;
  input4: 1.5s;
  input5: infinite;
}

HTML

<div class="pulsing-heart">❤️</div>

Определите `@keyframes pulse`. Используйте три ключевых кадра: `0%`, `50%` и `100%`. В кадрах `0%` и `100%` установите `transform: scale(1);`. В кадре `50%` установите `transform: scale(1.2);`. Примените анимацию к элементу `.pulsing-heart` с помощью `animation-name`, `animation-duration` и `animation-iteration-count`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Комбинирование нескольких анимаций

Примените к элементу `.multi-animated` две анимации одновременно: 'spin' (вращение на 360 градусов за 4 секунды, линейно, бесконечно) и 'pulse' (увеличение/уменьшение из предыдущего задания, 1.5 секунды, бесконечно).

CSS

@keyframes spin {
  from { transform: rotate(0deg) scale(1); } /* Добавим scale для корректной работы */
  to { transform: rotate(360deg) scale(1); }
}

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

.multi-animated {
  width: 60px;
  height: 60px;
  background-color: orange;
  border-radius: 10px;
  margin: 40px;
  /* Примените обе анимации здесь */
  input1: input2, input3;
}

                     @keyframes spin {
  from { transform: rotate(0deg) scale(1); } /* Добавим scale для корректной работы */
  to { transform: rotate(360deg) scale(1); }
}

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

.multi-animated {
  width: 60px;
  height: 60px;
  background-color: orange;
  border-radius: 10px;
  margin: 40px;
  /* Примените обе анимации здесь */
  input1: input2, input3;
}

HTML

<div class="multi-animated"></div>

В свойстве `animation` (или отдельных свойствах `animation-name`, `animation-duration` и т.д.) перечислите параметры для каждой анимации через запятую. Например: `animation: spin 4s linear infinite, pulse 1.5s infinite;`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Ступенчатая анимация с задержкой

Создайте эффект 'волны' для трех точек. Каждая точка должна анимироваться (подпрыгивать) с небольшой задержкой относительно предыдущей. Используйте анимацию 'bounce', которая перемещает элемент вверх и возвращает обратно.

CSS

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}

.dot {
  width: 15px;
  height: 15px;
  background-color: dodgerblue;
  border-radius: 50%;
  margin: 0 5px;
  animation-name: bounce;
  animation-duration: 0.6s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.dot:nth-child(1) {
  /* Нет задержки для первого */
}

.dot:input1(2) {
  input2: 0.1s;
}

.dot:input1(3) {
  input2: 0.2s;
}

                     @keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}

.dot {
  width: 15px;
  height: 15px;
  background-color: dodgerblue;
  border-radius: 50%;
  margin: 0 5px;
  animation-name: bounce;
  animation-duration: 0.6s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.dot:nth-child(1) {
  /* Нет задержки для первого */
}

.dot:input1(2) {
  input2: 0.1s;
}

.dot:input1(3) {
  input2: 0.2s;
}

HTML

<div class="loader">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

Определите `@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }`. Примените эту анимацию ко всем элементам `.dot`. Используйте селекторы `nth-child(n)` для задания разного значения `animation-delay` для каждого элемента `.dot`. Например, для второго элемента `.dot:nth-child(2)` задайте `animation-delay: 0.1s;`, для третьего `.dot:nth-child(3)` - `animation-delay: 0.2s;`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку