Длительность перехода с transition-duration [Модуль 8: Трансформации и переходы]: Тренажер CSS

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

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

Список тем

Базовая длительность перехода

id: 37425_td-duration-1

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

CSS

.box {
  width: 100px;
  height: 100px;
  background-color: steelblue;
  /* Свойство, которое будет анимироваться */
  transition-property: background-color;
  /* Задайте длительность перехода */
  input1: 2s;
}

.box:hover {
  background-color: tomato;
}

                     .box {
  width: 100px;
  height: 100px;
  background-color: steelblue;
  /* Свойство, которое будет анимироваться */
  transition-property: background-color;
  /* Задайте длительность перехода */
  input1: 2s;
}

.box:hover {
  background-color: tomato;
}

HTML

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

Используйте свойство `transition-duration`, чтобы задать время перехода. Значение времени можно указать в секундах (например, `2s`) или миллисекундах (например, `2000ms`).

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

Результат

Сообщения

Выполнить

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

Длительность в миллисекундах

id: 37425_td-duration-2

Перед вами изображение. При наведении курсора оно должно плавно становиться полупрозрачным. Сделайте так, чтобы этот эффект перехода занимал 300 миллисекунд. Заполните пропуск значением длительности.

CSS

img {
  display: block;
  width: 150px;
  height: auto;
  opacity: 1;
  transition-property: opacity;
  transition-duration: input1;
}

img:hover {
  opacity: 0.6;
}

                     img {
  display: block;
  width: 150px;
  height: auto;
  opacity: 1;
  transition-property: opacity;
  transition-duration: input1;
}

img:hover {
  opacity: 0.6;
}

HTML

<img src="https://naytikurs.ru/img/1.png" alt="Image">

Свойство `transition-duration` принимает значения не только в секундах (s), но и в миллисекундах (ms). 1 секунда равна 1000 миллисекунд. Вам нужно указать значение 300ms.

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

Результат

Сообщения

Выполнить

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

Мгновенный переход (нулевая длительность)

id: 37425_td-duration-3

Этот круг должен мгновенно менять свой цвет фона при наведении, без какой-либо плавной анимации. Укажите значение длительности, которое обеспечит такое поведение.

CSS

.circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: mediumseagreen;
  transition-property: background-color;
  transition-duration: input1;
}

.circle:hover {
  background-color: gold;
}

                     .circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: mediumseagreen;
  transition-property: background-color;
  transition-duration: input1;
}

.circle:hover {
  background-color: gold;
}

HTML

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

Чтобы переход произошел мгновенно, без анимации, установите значение `transition-duration` равным нулю. Можно использовать `0s` или `0ms`.

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

Результат

Сообщения

Выполнить

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

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

id: 37425_td-duration-4

Этот элемент при наведении должен одновременно менять ширину и цвет фона. Сделайте так, чтобы изменение ширины занимало 1 секунду, а изменение цвета фона — 2 секунды.

CSS

.resizable-box {
  width: 80px;
  height: 80px;
  background-color: dodgerblue;
  transition-property: width, background-color;
  /* Укажите длительности для width и background-color через запятую */
  transition-duration: input1;
}

.resizable-box:hover {
  width: 160px;
  background-color: orangered;
}

                     .resizable-box {
  width: 80px;
  height: 80px;
  background-color: dodgerblue;
  transition-property: width, background-color;
  /* Укажите длительности для width и background-color через запятую */
  transition-duration: input1;
}

.resizable-box:hover {
  width: 160px;
  background-color: orangered;
}

HTML

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

Когда `transition-property` содержит несколько свойств, `transition-duration` может принимать несколько значений, разделенных запятыми. Порядок значений в `transition-duration` должен соответствовать порядку свойств в `transition-property`. Укажите '1s, 2s'.

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

Результат

Сообщения

Выполнить

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

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

id: 37425_td-duration-5

Используя сокращенное свойство `transition`, настройте плавное изменение прозрачности изображения при наведении. Переход должен длиться 0.6 секунды.

CSS

img.fade {
  display: block;
  width: 180px;
  height: auto;
  opacity: 1;
  /* Задайте переход для opacity с длительностью 0.6s */
  transition: input1 input2;
}

img.fade:hover {
  opacity: 0.4;
}

                     img.fade {
  display: block;
  width: 180px;
  height: auto;
  opacity: 1;
  /* Задайте переход для opacity с длительностью 0.6s */
  transition: input1 input2;
}

img.fade:hover {
  opacity: 0.4;
}

HTML

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

Сокращенное свойство `transition` позволяет задать несколько параметров перехода в одной строке. Порядок обычно таков: `transition: [property] [duration] [timing-function] [delay]`. Вам нужно указать свойство (`opacity`) и длительность (`0.6s`).

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

Результат

Сообщения

Выполнить

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

Добавление свойства transition-duration

id: 37425_td-duration-6

Для элемента задано свойство `transition-property`, но не указана длительность перехода. Добавьте необходимое свойство `transition-duration` со значением 1.5 секунды, чтобы масштабирование при наведении происходило плавно.

CSS

.scalable {
  width: 100px;
  height: 100px;
  background-color: darkorchid;
  margin: 20px;
  transition-property: transform;
  /* Добавьте свойство для длительности */
  input1: 1.5s;
}

.scalable:hover {
  transform: scale(1.3);
}

                     .scalable {
  width: 100px;
  height: 100px;
  background-color: darkorchid;
  margin: 20px;
  transition-property: transform;
  /* Добавьте свойство для длительности */
  input1: 1.5s;
}

.scalable:hover {
  transform: scale(1.3);
}

HTML

<div class="scalable"></div>

Чтобы задать длительность перехода, необходимо добавить свойство `transition-duration` и указать желаемое время (например, `1.5s`).

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

Результат

Сообщения

Выполнить

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

Комбинация transition-duration и transition-delay

id: 37425_td-duration-7

Этот квадрат должен начать увеличиваться через 1 секунду после наведения курсора, а сам процесс увеличения должен занять 2 секунды. Заполните пропуски для `transition-duration` и `transition-delay`.

CSS

.delayed-box {
  width: 90px;
  height: 90px;
  background-color: lightcoral;
  transition-property: width, height;
  /* Длительность анимации */
  input1: 2s;
  /* Задержка перед началом */
  input2: 1s;
}

.delayed-box:hover {
  width: 150px;
  height: 150px;
}

                     .delayed-box {
  width: 90px;
  height: 90px;
  background-color: lightcoral;
  transition-property: width, height;
  /* Длительность анимации */
  input1: 2s;
  /* Задержка перед началом */
  input2: 1s;
}

.delayed-box:hover {
  width: 150px;
  height: 150px;
}

HTML

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

Используйте `transition-duration` для задания времени самой анимации (2s) и `transition-delay` для установки задержки перед началом анимации (1s).

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

Результат

Сообщения

Выполнить

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