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

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

В этой серии упражнений вы попрактикуетесь в использовании CSS свойства `animation-name`. Это свойство определяет имя одной или нескольких анимаций, определенных с помощью правила `@keyframes`, которые должны применяться к элементу. Вам предстоит заполнять пропуски в CSS коде, указывая правильные имена анимаций или само свойство `animation-name`, чтобы достичь нужного визуального эффекта. Задания варьируются от простого указания имени одной анимации до работы с несколькими анимациями и значением `none`.

Список тем

Применение простой анимации

Заставьте красный квадрат двигаться по диагонали вниз и вправо. Для этого необходимо связать элемент с уже существующей анимацией `moveDiagonal`, используя соответствующее CSS свойство.

CSS

@keyframes moveDiagonal {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(50px, 50px);
  }
}

.box {
  width: 50px;
  height: 50px;
  background-color: red;
  position: relative;
  /* Укажите свойство для имени анимации */
  input1: moveDiagonal;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

                     @keyframes moveDiagonal {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(50px, 50px);
  }
}

.box {
  width: 50px;
  height: 50px;
  background-color: red;
  position: relative;
  /* Укажите свойство для имени анимации */
  input1: moveDiagonal;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

HTML

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

Чтобы применить анимацию к элементу, используйте свойство `animation-name` и укажите в качестве значения имя `@keyframes` правила, которое вы хотите использовать. В данном случае имя анимации - `moveDiagonal`.

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

Результат

Сообщения

Выполнить

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

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

Выбор имени для анимации

Синий квадрат должен плавно появляться и исчезать. Анимация для этого уже определена, но ей не хватает имени в правиле `@keyframes`. Задайте имя `fadeInOut` для правила `@keyframes` и примените его к элементу `.box`.

CSS

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

.box {
  width: 70px;
  height: 70px;
  background-color: blue;
  animation-name: input2;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

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

.box {
  width: 70px;
  height: 70px;
  background-color: blue;
  animation-name: input2;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

HTML

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

Сначала дайте имя правилу `@keyframes`, написав его после слова `@keyframes`. Затем используйте это же имя в качестве значения для свойства `animation-name` у селектора `.box`.

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

Результат

Сообщения

Выполнить

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

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

Применение нескольких анимаций

Зеленый круг должен одновременно двигаться вправо и изменять свой цвет с зеленого на желтый. Для этого примените к элементу две анимации: `slideRight` и `changeColor`. Укажите оба имени через запятую.

CSS

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

@keyframes changeColor {
  from {
    background-color: green;
  }
  to {
    background-color: yellow;
  }
}

.circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: green;
  position: relative;
  input1: input2;
  animation-duration: 3s, 2s; /* Длительность для slideRight и changeColor */
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

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

@keyframes changeColor {
  from {
    background-color: green;
  }
  to {
    background-color: yellow;
  }
}

.circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: green;
  position: relative;
  input1: input2;
  animation-duration: 3s, 2s; /* Длительность для slideRight и changeColor */
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

HTML

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

Чтобы применить несколько анимаций к одному элементу, перечислите их имена в свойстве `animation-name` через запятую. Порядок имен должен соответствовать порядку других свойств анимации (например, `animation-duration`), если они тоже указаны через запятую.

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

Результат

Сообщения

Выполнить

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

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

Отмена анимации с помощью 'none'

К элементу применена анимация `pulsate`, заставляющая его пульсировать. Ваша задача - отменить эту анимацию, используя специальное значение для свойства `animation-name`.

CSS

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

.box {
  width: 80px;
  height: 80px;
  background-color: orange;
  margin: 50px;
  /* Изначально анимация применена */
  animation-name: pulsate;
  animation-duration: 1s;
  animation-iteration-count: infinite;

  /* Отмените анимацию здесь */
  input1: input2;
}

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

.box {
  width: 80px;
  height: 80px;
  background-color: orange;
  margin: 50px;
  /* Изначально анимация применена */
  animation-name: pulsate;
  animation-duration: 1s;
  animation-iteration-count: infinite;

  /* Отмените анимацию здесь */
  input1: input2;
}

HTML

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

Чтобы отменить применение любых анимаций к элементу, используйте значение `none` для свойства `animation-name`.

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

Результат

Сообщения

Выполнить

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

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

Использование animation-name в shorthand свойстве

Примените к фиолетовому квадрату анимацию `spin`, используя shorthand свойство `animation`. Анимация должна длиться 4 секунды и повторяться бесконечно.

CSS

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

.box {
  width: 60px;
  height: 60px;
  background-color: purple;
  margin: 50px;
  /* Используйте shorthand свойство animation */
  input1: input2 4s infinite;
}

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

.box {
  width: 60px;
  height: 60px;
  background-color: purple;
  margin: 50px;
  /* Используйте shorthand свойство animation */
  input1: input2 4s infinite;
}

HTML

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

В shorthand свойстве `animation` имя анимации указывается как одно из значений. Порядок значений важен. Обычно имя указывается либо первым, либо после значений времени (duration, delay). Пример: `animation: spin 4s infinite;`.

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

Результат

Сообщения

Выполнить

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

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

Регистрозависимость имен анимаций

К элементу должна применяться анимация `ShakeEffect`, которая заставляет его слегка дрожать. Однако в свойстве `animation-name` имя указано в нижнем регистре. Исправьте имя анимации, чтобы оно точно совпадало с именем в `@keyframes`.

CSS

@keyframes ShakeEffect {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

.icon {
  width: 50px;
  height: 50px;
  display: block;
  margin: 50px auto;
  /* Исправьте имя анимации */
  animation-name: input1;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
}

                     @keyframes ShakeEffect {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

.icon {
  width: 50px;
  height: 50px;
  display: block;
  margin: 50px auto;
  /* Исправьте имя анимации */
  animation-name: input1;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
}

HTML

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

Имена анимаций, заданные в `@keyframes`, являются регистрозависимыми. Это значит, что `ShakeEffect` и `shakeeffect` - это разные имена. Убедитесь, что значение свойства `animation-name` точно совпадает с именем, указанным после `@keyframes`.

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

Результат

Сообщения

Выполнить

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

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

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

К элементу `.item` применена анимация `moveUp`. Для элемента с дополнительным классом `.highlight` нужно переопределить анимацию на `glow`. Задайте новую анимацию для селектора `.item.highlight`.

CSS

@keyframes moveUp {
  to { transform: translateY(-10px); }
}

@keyframes glow {
  50% { box-shadow: 0 0 15px yellow; }
}

.item {
  padding: 15px;
  margin: 10px;
  border: 1px solid #ccc;
  text-align: center;
  animation-name: moveUp;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.item.highlight {
  border-color: gold;
  /* Переопределите анимацию здесь */
  input1: input2;
  /* Можно также переопределить длительность или другие параметры */
  animation-duration: 1s;
}

                     @keyframes moveUp {
  to { transform: translateY(-10px); }
}

@keyframes glow {
  50% { box-shadow: 0 0 15px yellow; }
}

.item {
  padding: 15px;
  margin: 10px;
  border: 1px solid #ccc;
  text-align: center;
  animation-name: moveUp;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.item.highlight {
  border-color: gold;
  /* Переопределите анимацию здесь */
  input1: input2;
  /* Можно также переопределить длительность или другие параметры */
  animation-duration: 1s;
}

HTML

<div class="item">Обычный</div>
<div class="item highlight">Выделенный</div>

Чтобы переопределить анимацию для более специфичного селектора (в данном случае `.item.highlight`), просто используйте свойство `animation-name` снова и укажите новое имя анимации (`glow`).

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

Результат

Сообщения

Выполнить

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

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