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

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

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

Список тем

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

В этом задании квадрат должен плавно перемещаться справа налево за определенное время. Вам нужно указать длительность этой анимации в секундах. Заполните пропуск в 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`.

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

Результат

Сообщения

Выполнить

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

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

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

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

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

Результат

Сообщения

Выполнить

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

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

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

Теперь сделаем анимацию очень медленной. Изображение должно медленно появляться (изменять прозрачность от 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'.

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

Результат

Сообщения

Выполнить

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

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

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

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

Свойство `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'. Порядок других значений (если они есть) также важен, но в данном случае нужны только имя и длительность.

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

Результат

Сообщения

Выполнить

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

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

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

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

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

Результат

Сообщения

Выполнить

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

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

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

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

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

Результат

Сообщения

Выполнить

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

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