Свойство animation-direction: Тренажер CSS

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

На этой странице собраны упражнения для отработки свойства CSS `animation-direction`. Это свойство определяет, должна ли анимация воспроизводиться в обратном направлении в некоторых циклах. Вы будете работать с готовым HTML и CSS кодом, в котором нужно будет заполнить пропуски, связанные с `animation-direction`. Задания идут от простого к сложному: от применения базовых значений (`normal`, `reverse`) до более сложных (`alternate`, `alternate-reverse`) и использования в сокращенной записи `animation`. Цель — закрепить понимание того, как каждое значение `animation-direction` влияет на поведение анимации.

Список тем

Прямое воспроизведение анимации

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

CSS

@keyframes moveRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

.box {
  width: 50px;
  height: 50px;
  background-color: #4CAF50;
  position: relative;
  animation-name: moveRight;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  /* Укажите направление анимации */
  animation-direction: input1;
}

                     @keyframes moveRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

.box {
  width: 50px;
  height: 50px;
  background-color: #4CAF50;
  position: relative;
  animation-name: moveRight;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  /* Укажите направление анимации */
  animation-direction: input1;
}

HTML

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

Чтобы анимация воспроизводилась в прямом направлении (от начала к концу), используйте значение `normal` для свойства `animation-direction`.

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

Результат

Сообщения

Выполнить

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

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

Обратное воспроизведение анимации

Используя ту же анимацию перемещения квадрата, что и в предыдущем задании, измените направление воспроизведения. Квадрат должен начать движение справа (конечное состояние) и двигаться налево (начальное состояние).

CSS

@keyframes moveRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

.box {
  width: 50px;
  height: 50px;
  background-color: #2196F3;
  position: relative;
  animation-name: moveRight;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  /* Укажите направление анимации */
  animation-direction: input1;
}

                     @keyframes moveRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

.box {
  width: 50px;
  height: 50px;
  background-color: #2196F3;
  position: relative;
  animation-name: moveRight;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  /* Укажите направление анимации */
  animation-direction: input1;
}

HTML

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

Для воспроизведения анимации в обратном порядке (от конца к началу) используйте значение `reverse` для свойства `animation-direction`.

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

Результат

Сообщения

Выполнить

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

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

Поочередное направление анимации

Теперь заставьте квадрат двигаться сначала слева направо, а затем, в следующем цикле, справа налево, и так далее. Анимация должна менять направление в каждом цикле.

CSS

@keyframes moveRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

.box {
  width: 50px;
  height: 50px;
  background-color: #ff9800;
  position: relative;
  animation-name: moveRight;
  animation-duration: 3s;
  animation-iteration-count: infinite; /* Анимация повторяется бесконечно */
  /* Укажите направление анимации */
  animation-direction: input1;
}

                     @keyframes moveRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

.box {
  width: 50px;
  height: 50px;
  background-color: #ff9800;
  position: relative;
  animation-name: moveRight;
  animation-duration: 3s;
  animation-iteration-count: infinite; /* Анимация повторяется бесконечно */
  /* Укажите направление анимации */
  animation-direction: input1;
}

HTML

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

Чтобы анимация сначала шла вперед, а в следующем цикле — назад, используйте значение `alternate` для свойства `animation-direction`. Убедитесь, что `animation-iteration-count` установлено в значение больше 1 или `infinite`.

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

Результат

Сообщения

Выполнить

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

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

Поочередное обратное направление

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

CSS

@keyframes moveRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

.box {
  width: 50px;
  height: 50px;
  background-color: #e91e63;
  position: relative;
  animation-name: moveRight;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  /* Укажите направление анимации */
  input1: input2;
}

                     @keyframes moveRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

.box {
  width: 50px;
  height: 50px;
  background-color: #e91e63;
  position: relative;
  animation-name: moveRight;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  /* Укажите направление анимации */
  input1: input2;
}

HTML

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

Чтобы анимация сначала шла назад, а в следующем цикле — вперед, используйте значение `alternate-reverse` для свойства `animation-direction`. Требуется `animation-iteration-count` больше 1 или `infinite`.

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

Результат

Сообщения

Выполнить

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

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

Направление в сокращенной записи

Используется анимация изменения прозрачности. Задайте анимацию с помощью сокращенного свойства `animation`. Укажите имя анимации (`fade`), длительность (2 секунды), бесконечное повторение (`infinite`) и направление `alternate` (сначала исчезает, потом появляется).

CSS

@keyframes fade {
  0% { opacity: 1; }
  50% { opacity: 0.1; }
  100% { opacity: 1; }
}

.target {
  width: 80px;
  height: 80px;
  background-color: #00bcd4;
  /* Задайте анимацию сокращенным свойством */
  animation: input1 2s infinite input2;
}

                     @keyframes fade {
  0% { opacity: 1; }
  50% { opacity: 0.1; }
  100% { opacity: 1; }
}

.target {
  width: 80px;
  height: 80px;
  background-color: #00bcd4;
  /* Задайте анимацию сокращенным свойством */
  animation: input1 2s infinite input2;
}

HTML

<div class="target"></div>

В сокращенном свойстве `animation` значение `animation-direction` указывается так же, как и другие параметры (например, `animation-duration`, `animation-name`). Порядок обычно не строгий, но принято указывать длительность, имя, режим и направление. Пример: `animation: имя длительность режим_повторения направление;`

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

Результат

Сообщения

Выполнить

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

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

Комбинация: обратное и чередование

Используется анимация вращения изображения. Примените сокращенное свойство `animation`. Вам нужно задать имя анимации (`spin`), длительность (4 секунды), бесконечное повторение (`infinite`) и направление `alternate-reverse` (сначала вращение в одну сторону, потом в обратную, начиная с обратного цикла).

CSS

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

.icon {
  width: 60px;
  height: 60px;
  /* Задайте анимацию: имя spin, длительность 4s, бесконечно, направление alternate-reverse */
  animation: input1 4s input2 input3;
}

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

.icon {
  width: 60px;
  height: 60px;
  /* Задайте анимацию: имя spin, длительность 4s, бесконечно, направление alternate-reverse */
  animation: input1 4s input2 input3;
}

HTML

<img src="https://naytikurs.ru/img/7.png" class="icon" alt="icon">

Добавьте значение `alternate-reverse` в сокращенную запись свойства `animation`, чтобы анимация чередовала направление, начиная с обратного хода. Пример: `animation: spin 4s infinite alternate-reverse;`

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

Результат

Сообщения

Выполнить

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

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