Свойство animation-play-state [Модуль 9: Анимации]: Тренажер CSS

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

В этой серии заданий вы попрактикуетесь в управлении состоянием CSS-анимаций с помощью свойства `animation-play-state`. Это свойство позволяет приостанавливать (`paused`) и возобновлять (`running`) анимации. Вы будете заполнять пропуски в CSS-коде, чтобы управлять анимациями при различных условиях, например, при наведении курсора мыши. Задания построены от простого к сложному, помогая закрепить понимание того, как и когда использовать `animation-play-state`.

Список тем

Приостановка анимации при загрузке

id: 37441_css-anim-play-state-1

В этом задании есть квадрат, для которого настроена простая анимация движения. Ваша задача — сделать так, чтобы анимация была приостановлена сразу после загрузки страницы. Заполните пропуск в CSS, чтобы установить начальное состояние анимации.

CSS

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

.container {
  width: 150px;
  height: 50px;
  border: 1px solid #ccc;
  margin-top: 20px;
}

.box {
  width: 50px;
  height: 50px;
  background-color: #ff6347;
  animation-name: moveRight;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  /* Установите состояние анимации */
  animation-play-state: input1;
}

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

.container {
  width: 150px;
  height: 50px;
  border: 1px solid #ccc;
  margin-top: 20px;
}

.box {
  width: 50px;
  height: 50px;
  background-color: #ff6347;
  animation-name: moveRight;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  /* Установите состояние анимации */
  animation-play-state: input1;
}

HTML

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

Чтобы анимация была приостановлена по умолчанию, используйте свойство `animation-play-state` со значением `paused` для селектора `.box`.

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

Результат

Сообщения

Выполнить

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

Запуск анимации при наведении

id: 37441_css-anim-play-state-2

Квадрат анимирован и изначально приостановлен. Необходимо сделать так, чтобы анимация запускалась (возобновлялась), когда пользователь наводит курсор мыши на квадрат. Допишите CSS-правило для состояния `:hover`.

CSS

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

.container {
  width: 150px;
  height: 50px;
  border: 1px solid #ccc;
  margin-top: 20px;
}

.box {
  width: 50px;
  height: 50px;
  background-color: #4682b4;
  animation-name: moveRight;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-play-state: paused; /* Анимация изначально остановлена */
}

.box:hover {
  /* Запустите анимацию при наведении */
  animation-play-state: input1;
}

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

.container {
  width: 150px;
  height: 50px;
  border: 1px solid #ccc;
  margin-top: 20px;
}

.box {
  width: 50px;
  height: 50px;
  background-color: #4682b4;
  animation-name: moveRight;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-play-state: paused; /* Анимация изначально остановлена */
}

.box:hover {
  /* Запустите анимацию при наведении */
  animation-play-state: input1;
}

HTML

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

В правиле для `.box:hover` используйте свойство `animation-play-state` со значением `running`, чтобы запустить анимацию при наведении.

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

Результат

Сообщения

Выполнить

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

Приостановка анимации при наведении

id: 37441_css-anim-play-state-3

В этом примере анимированный круг вращается по умолчанию. Ваша задача — приостановить анимацию вращения, когда пользователь наводит курсор на круг. Заполните пропуск в CSS для состояния `:hover`.

CSS

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.circle {
  width: 80px;
  height: 80px;
  background-color: #32cd32;
  border-radius: 50%;
  margin: 30px auto;
  animation-name: rotate;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  /* Анимация запущена по умолчанию */
  animation-play-state: running;
}

.circle:hover {
  /* Приостановите анимацию при наведении */
  animation-play-state: input1;
}

                     @keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.circle {
  width: 80px;
  height: 80px;
  background-color: #32cd32;
  border-radius: 50%;
  margin: 30px auto;
  animation-name: rotate;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  /* Анимация запущена по умолчанию */
  animation-play-state: running;
}

.circle:hover {
  /* Приостановите анимацию при наведении */
  animation-play-state: input1;
}

HTML

<div class="circle"></div>

Чтобы приостановить анимацию при наведении, добавьте правило для `.circle:hover` и установите свойство `animation-play-state` в значение `paused`.

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

Результат

Сообщения

Выполнить

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

Использование имени свойства

id: 37441_css-anim-play-state-4

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

CSS

@keyframes pulse {
  0% { background-color: #ffcc00; }
  50% { background-color: #ff6600; }
  100% { background-color: #ffcc00; }
}

.pulsing-box {
  width: 100px;
  height: 100px;
  margin: 30px auto;
  animation-name: pulse;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  /* Впишите свойство и значение для приостановки анимации */
  input1: input2;
}

                     @keyframes pulse {
  0% { background-color: #ffcc00; }
  50% { background-color: #ff6600; }
  100% { background-color: #ffcc00; }
}

.pulsing-box {
  width: 100px;
  height: 100px;
  margin: 30px auto;
  animation-name: pulse;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  /* Впишите свойство и значение для приостановки анимации */
  input1: input2;
}

HTML

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

Свойство, управляющее состоянием воспроизведения анимации (пауза/запуск), называется `animation-play-state`. Установите его значение в `paused` для селектора `.pulsing-box`.

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

Результат

Сообщения

Выполнить

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

Управление анимацией дочернего элемента

id: 37441_css-anim-play-state-5

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

CSS

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

.image-container {
  width: 150px;
  height: 150px;
  margin: 30px auto;
  border: 2px dashed #aaa;
  display: flex;
  justify-content: center;
  align-items: center;
}

.animated-image {
  width: 100px;
  height: 100px;
  animation-name: spin;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-play-state: running; /* Запущена по умолчанию */
}

/* Приостановите анимацию изображения при наведении на контейнер */
.image-container:hover .animated-image {
  input1: input2;
}

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

.image-container {
  width: 150px;
  height: 150px;
  margin: 30px auto;
  border: 2px dashed #aaa;
  display: flex;
  justify-content: center;
  align-items: center;
}

.animated-image {
  width: 100px;
  height: 100px;
  animation-name: spin;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-play-state: running; /* Запущена по умолчанию */
}

/* Приостановите анимацию изображения при наведении на контейнер */
.image-container:hover .animated-image {
  input1: input2;
}

HTML

<div class="image-container">
  <img src="https://naytikurs.ru/img/7.png" alt="Animated Globe" class="animated-image">
</div>

Используйте селектор `.image-container:hover .animated-image`. Внутри этого правила установите свойство `animation-play-state` в значение `paused`, чтобы остановить анимацию изображения при наведении на его контейнер.

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

Результат

Сообщения

Выполнить

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

Пауза и возобновление анимации

id: 37441_css-anim-play-state-6

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

CSS

@keyframes slide {
  0% { transform: translateX(0); }
  50% { transform: translateX(50px); }
  100% { transform: translateX(0); }
}

.toggle-box {
  width: 60px;
  height: 60px;
  background-color: #8a2be2;
  margin: 40px;
  animation-name: slide;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  /* Начальное состояние анимации */
  animation-play-state: input1;
}

.toggle-box:hover {
  /* Состояние анимации при наведении */
  animation-play-state: input2;
}

                     @keyframes slide {
  0% { transform: translateX(0); }
  50% { transform: translateX(50px); }
  100% { transform: translateX(0); }
}

.toggle-box {
  width: 60px;
  height: 60px;
  background-color: #8a2be2;
  margin: 40px;
  animation-name: slide;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  /* Начальное состояние анимации */
  animation-play-state: input1;
}

.toggle-box:hover {
  /* Состояние анимации при наведении */
  animation-play-state: input2;
}

HTML

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

Для начального состояния `.toggle-box` установите `animation-play-state: paused;`. Для состояния `.toggle-box:hover` установите `animation-play-state: running;`. Когда курсор уходит, элемент возвращается к своему обычному состоянию, где анимация уже установлена как `paused`.

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

Результат

Сообщения

Выполнить

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