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

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

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

Список тем

Установка базовой длительности анимации

id: 37435_anim-duration-1

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

CSS

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

.box {
  width: 50px;
  height: 50px;
  background-color: #5c9aff;
  position: relative;
  left: 0;
  animation-name: moveLeft;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  /* Установите длительность анимации */
  input1: 3s;
}

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

.box {
  width: 50px;
  height: 50px;
  background-color: #5c9aff;
  position: relative;
  left: 0;
  animation-name: moveLeft;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  /* Установите длительность анимации */
  input1: 3s;
}

HTML

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

Найдите свойство, отвечающее за длительность анимации. Укажите значение '3s', чтобы установить длительность в 3 секунды. Свойство называется `animation-duration`.

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

Результат

Сообщения

Выполнить

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

Использование миллисекунд

id: 37435_anim-duration-2

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

CSS

@keyframes colorChange {
  0% { background-color: #ff6b6b; }
  50% { background-color: #feca57; }
  100% { background-color: #48dbfb; }
}

.circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #ff6b6b;
  animation-name: colorChange;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: input1;
}

                     @keyframes colorChange {
  0% { background-color: #ff6b6b; }
  50% { background-color: #feca57; }
  100% { background-color: #48dbfb; }
}

.circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #ff6b6b;
  animation-name: colorChange;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: input1;
}

HTML

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

Используйте свойство `animation-duration`. Для указания миллисекунд используйте единицу 'ms'. Вам нужно установить значение '500ms'.

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

Результат

Сообщения

Выполнить

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

Очень медленная анимация

id: 37435_anim-duration-3

Теперь сделаем анимацию очень медленной. Изображение должно медленно появляться (изменять прозрачность от 0 до 1). Установите длительность этой анимации так, чтобы она занимала 10 секунд.

CSS

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.image-fade {
  width: 150px;
  height: auto;
  opacity: 0; /* Start invisible */
  animation-name: fadeIn;
  animation-iteration-count: 1;
  animation-fill-mode: forwards; /* Stay visible after animation */
  input1: input2;
}

                     @keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.image-fade {
  width: 150px;
  height: auto;
  opacity: 0; /* Start invisible */
  animation-name: fadeIn;
  animation-iteration-count: 1;
  animation-fill-mode: forwards; /* Stay visible after animation */
  input1: input2;
}

HTML

<img src="https://naytikurs.ru/img/1.png" alt="Fading Image" class="image-fade">

Найдите свойство `animation-duration` и установите для него значение '10s'.

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

Результат

Сообщения

Выполнить

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

Разная длительность для разных элементов

id: 37435_anim-duration-4

В этом задании два квадрата анимируются одинаково (движение вправо), но должны делать это с разной скоростью. Установите длительность анимации для первого квадрата в 2 секунды, а для второго — в 4 секунды.

CSS

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

.box {
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
  animation-name: moveRight;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.box1 {
  background-color: #5c9aff;
  input1: 2s;
}

.box2 {
  background-color: #ff6b6b;
  input2: 4s;
}

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

.box {
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
  animation-name: moveRight;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.box1 {
  background-color: #5c9aff;
  input1: 2s;
}

.box2 {
  background-color: #ff6b6b;
  input2: 4s;
}

HTML

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

Для каждого класса (`.box1` и `.box2`) используйте свойство `animation-duration` с соответствующими значениями: '2s' для первого и '4s' для второго.

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

Результат

Сообщения

Выполнить

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

Длительность в сокращенном свойстве animation

id: 37435_anim-duration-5

Свойство `animation` позволяет задать несколько параметров анимации одновременно, включая её длительность. В этом задании пульсирующий круг использует сокращенное свойство. Заполните пропуск так, чтобы задать имя анимации 'pulse' и её длительность в 1.5 секунды.

CSS

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

.pulsing-circle {
  width: 60px;
  height: 60px;
  background-color: #1dd1a1;
  border-radius: 50%;
  margin: 20px;
  /* Задайте имя 'pulse' и длительность 1.5s */
  animation: input1 infinite alternate;
}

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

.pulsing-circle {
  width: 60px;
  height: 60px;
  background-color: #1dd1a1;
  border-radius: 50%;
  margin: 20px;
  /* Задайте имя 'pulse' и длительность 1.5s */
  animation: input1 infinite alternate;
}

HTML

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

В сокращенном свойстве `animation` значение длительности указывается после имени анимации. Используйте 'pulse 1.5s'. Порядок других значений (если они есть) также важен, но в данном случае нужны только имя и длительность.

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

Результат

Сообщения

Выполнить

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

Несколько анимаций с разной длительностью

id: 37435_anim-duration-6

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

CSS

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

@keyframes colorChange {
  from {
    background-color: #5c9aff;
  }
  to {
    background-color: #ff6b6b;
  }
}

.multi-anim {
  width: 50px;
  height: 50px;
  background-color: #5c9aff;
  position: relative;
  animation-name: moveRight, colorChange;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  /* Длительность для moveRight - 4s, для colorChange - 2s */
  input1: input2;
}

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

@keyframes colorChange {
  from {
    background-color: #5c9aff;
  }
  to {
    background-color: #ff6b6b;
  }
}

.multi-anim {
  width: 50px;
  height: 50px;
  background-color: #5c9aff;
  position: relative;
  animation-name: moveRight, colorChange;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  /* Длительность для moveRight - 4s, для colorChange - 2s */
  input1: input2;
}

HTML

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

Когда используется несколько анимаций, их параметры перечисляются через запятую. В свойстве `animation-duration` укажите '4s, 2s'. Порядок должен соответствовать порядку имен анимаций в `animation-name`.

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

Результат

Сообщения

Выполнить

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

Нулевая длительность анимации

id: 37435_anim-duration-7

Иногда нужно, чтобы анимация технически была применена, но не выполнялась (например, для срабатывания событий `animationend`). Этого можно достичь, установив длительность в 0 секунд. Заставьте квадрат мгновенно переместиться в конечную позицию, установив нулевую длительность.

CSS

@keyframes jumpToEnd {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(150px);
    opacity: 0.5;
  }
}

.instant-box {
  width: 50px;
  height: 50px;
  background-color: #feca57;
  animation-name: jumpToEnd;
  animation-fill-mode: forwards; /* Остаться в конечном состоянии */
  input1: input2;
}

                     @keyframes jumpToEnd {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(150px);
    opacity: 0.5;
  }
}

.instant-box {
  width: 50px;
  height: 50px;
  background-color: #feca57;
  animation-name: jumpToEnd;
  animation-fill-mode: forwards; /* Остаться в конечном состоянии */
  input1: input2;
}

HTML

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

Используйте свойство `animation-duration` и установите значение '0s'. Это приведет к тому, что анимация завершится мгновенно.

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

Результат

Сообщения

Выполнить

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