Длительность перехода с transition-duration: Тренажер CSS

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

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

Список тем

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

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

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

Результат

Сообщения

Выполнить

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

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

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

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

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

Результат

Сообщения

Выполнить

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

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

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

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

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

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

Результат

Сообщения

Выполнить

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

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

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

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

Используя сокращенное свойство `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

Для элемента задано свойство `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

Этот квадрат должен начать увеличиваться через 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).

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

Результат

Сообщения

Выполнить

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

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