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

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

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

Список тем

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

В этом задании есть квадрат, для которого настроена простая анимация движения. Ваша задача — сделать так, чтобы анимация была приостановлена сразу после загрузки страницы. Заполните пропуск в 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`.

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

Результат

Сообщения

Выполнить

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

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

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

Квадрат анимирован и изначально приостановлен. Необходимо сделать так, чтобы анимация запускалась (возобновлялась), когда пользователь наводит курсор мыши на квадрат. Допишите 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`, чтобы запустить анимацию при наведении.

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

Результат

Сообщения

Выполнить

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

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

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

В этом примере анимированный круг вращается по умолчанию. Ваша задача — приостановить анимацию вращения, когда пользователь наводит курсор на круг. Заполните пропуск в 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`.

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

Результат

Сообщения

Выполнить

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

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

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

Анимация изменения цвета фона элемента должна быть приостановлена по умолчанию. В этот раз вам нужно вписать не только значение, но и само свойство 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`.

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

Результат

Сообщения

Выполнить

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

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

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

Внутри контейнера находится анимированное изображение. Анимация должна быть приостановлена, когда курсор мыши находится над родительским контейнером (`.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`, чтобы остановить анимацию изображения при наведении на его контейнер.

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

Результат

Сообщения

Выполнить

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

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

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

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

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`.

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

Результат

Сообщения

Выполнить

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

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