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

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

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

Список тем

Простая задержка при наведении

id: 37427_td-01

Создайте эффект, при котором квадрат плавно меняет цвет фона на красный сразу при наведении, а его ширина увеличивается до 150px только через 1 секунду после наведения. Используйте свойство `transition-delay` для задержки изменения ширины.

CSS

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  /* Плавный переход для цвета фона */
  transition: background-color 0.5s ease;
}

.box:hover {
  background-color: red;
  width: 150px;
  /* Добавьте задержку для изменения ширины */
  transition-property: width;
  transition-duration: 0.5s;
  input1: input2;
}

                     .box {
  width: 100px;
  height: 100px;
  background-color: blue;
  /* Плавный переход для цвета фона */
  transition: background-color 0.5s ease;
}

.box:hover {
  background-color: red;
  width: 150px;
  /* Добавьте задержку для изменения ширины */
  transition-property: width;
  transition-duration: 0.5s;
  input1: input2;
}

HTML

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

Добавьте свойство `transition` для `background-color` без задержки (или с задержкой 0s). Затем добавьте отдельное свойство `transition` для `width` с указанием свойства, длительности и задержки. Или используйте составное свойство `transition`, перечислив через запятую параметры для `background-color` (с задержкой 0s) и `width` (с задержкой 1s). Для задания задержки используйте свойство `transition-delay` или укажите время задержки четвертым параметром в сокращенной записи `transition`.

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

Результат

Сообщения

Выполнить

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

Задержка в сокращенном свойстве transition

id: 37427_td-02

Заставьте круг плавно увеличиваться в размере (свойства `width` и `height`) при наведении курсора. Анимация должна начаться через 0.5 секунды после наведения. Используйте сокращенное свойство `transition` и укажите в нем значение задержки.

CSS

.circle {
  width: 80px;
  height: 80px;
  background-color: green;
  border-radius: 50%;
  /* Добавьте плавный переход с задержкой */
  input1: width 0.4s ease input2, height 0.4s ease input3;
}

.circle:hover {
  width: 120px;
  height: 120px;
}

                     .circle {
  width: 80px;
  height: 80px;
  background-color: green;
  border-radius: 50%;
  /* Добавьте плавный переход с задержкой */
  input1: width 0.4s ease input2, height 0.4s ease input3;
}

.circle:hover {
  width: 120px;
  height: 120px;
}

HTML

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

Используйте сокращенное свойство `transition`. Укажите анимируемые свойства (`width`, `height`), длительность анимации (например, `0.4s`), и добавьте значение задержки (`0.5s`) в конце.

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

Результат

Сообщения

Выполнить

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

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

id: 37427_td-03

При наведении на прямоугольник он должен плавно изменить цвет фона на оранжевый (анимация длительностью 0.3s без задержки) и одновременно сдвинуться вправо на 50px (анимация длительностью 0.5s с задержкой 0.3s). Используйте одно сокращенное свойство `transition`.

CSS

.rect {
  width: 150px;
  height: 70px;
  background-color: purple;
  /* Укажите переходы для фона и трансформации с разными задержками */
  transition: background-color 0.3s ease input1, transform 0.5s ease input2;
}

.rect:hover {
  background-color: orange;
  transform: translateX(50px);
}

                     .rect {
  width: 150px;
  height: 70px;
  background-color: purple;
  /* Укажите переходы для фона и трансформации с разными задержками */
  transition: background-color 0.3s ease input1, transform 0.5s ease input2;
}

.rect:hover {
  background-color: orange;
  transform: translateX(50px);
}

HTML

<div class="rect"></div>

В сокращенном свойстве `transition` перечислите через запятую параметры для каждого анимируемого свойства. Для `background-color` укажите длительность 0.3s и задержку 0s (или не указывайте задержку). Для `transform` укажите длительность 0.5s и задержку 0.3s.

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

Результат

Сообщения

Выполнить

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

Отрицательная задержка

id: 37427_td-04

При наведении на элемент, его прозрачность должна плавно измениться от 0 до 1. Используйте отрицательную задержку `-0.5s` при длительности перехода в 1 секунду, чтобы анимация выглядела так, будто она уже наполовину выполнилась к моменту наведения.

CSS

.fade-box {
  width: 100px;
  height: 100px;
  background-color: teal;
  opacity: 0;
  transition-property: opacity;
  transition-duration: 1s;
  input1: input2;
}

.fade-box:hover {
  opacity: 1;
}

                     .fade-box {
  width: 100px;
  height: 100px;
  background-color: teal;
  opacity: 0;
  transition-property: opacity;
  transition-duration: 1s;
  input1: input2;
}

.fade-box:hover {
  opacity: 1;
}

HTML

<div class="fade-box">Наведи на меня</div>

Используйте свойство `transition-delay` или укажите задержку в сокращенном свойстве `transition`. Значение задержки должно быть отрицательным, например, `-0.5s` или `-500ms`. Длительность перехода (`transition-duration`) должна быть 1s.

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

Результат

Сообщения

Выполнить

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

Последовательная анимация элементов

id: 37427_td-05

Создайте три круга. При наведении на контейнер `.container`, первый круг должен начать увеличиваться сразу, второй - через 0.2 секунды, а третий - через 0.4 секунды. Все анимации длятся 0.5 секунды.

CSS

.container {
  display: flex;
  gap: 10px;
  padding-top: 20px;
}

.dot {
  width: 50px;
  height: 50px;
  background-color: dodgerblue;
  border-radius: 50%;
  transition: transform 0.5s ease;
}

/* Задержка для первого круга */
.container:hover .dot:nth-child(1) {
  transform: scale(1.3);
  input1: 0s;
}

/* Задержка для второго круга */
.container:hover .dot:nth-child(2) {
  transform: scale(1.3);
  transition-delay: input2;
}

/* Задержка для третьего круга */
.container:hover .dot:nth-child(3) {
  transform: scale(1.3);
  transition-delay: input3;
}

                     .container {
  display: flex;
  gap: 10px;
  padding-top: 20px;
}

.dot {
  width: 50px;
  height: 50px;
  background-color: dodgerblue;
  border-radius: 50%;
  transition: transform 0.5s ease;
}

/* Задержка для первого круга */
.container:hover .dot:nth-child(1) {
  transform: scale(1.3);
  input1: 0s;
}

/* Задержка для второго круга */
.container:hover .dot:nth-child(2) {
  transform: scale(1.3);
  transition-delay: input2;
}

/* Задержка для третьего круга */
.container:hover .dot:nth-child(3) {
  transform: scale(1.3);
  transition-delay: input3;
}

HTML

<div class="container">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

Задайте базовый стиль для всех кругов `.dot`. Определите стиль `:hover` для контейнера `.container`, который будет влиять на дочерние круги. Используйте селекторы `:nth-child(n)` для выбора каждого круга внутри контейнера при наведении на сам контейнер (`.container:hover .dot:nth-child(n)`). Каждому кругу задайте свой `transition-delay` (0s, 0.2s, 0.4s) для свойства `transform`.

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

Результат

Сообщения

Выполнить

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

Задержка появления картинки

id: 37427_td-06

Сделайте так, чтобы при наведении на контейнер, изображение внутри него плавно появлялось (изменяя `opacity` от 0 до 1) с задержкой в 0.7 секунды. Длительность самого перехода должна быть 0.5 секунды.

CSS

.image-container {
  width: 150px;
  height: 150px;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-container img {
  max-width: 90%;
  max-height: 90%;
  opacity: 0;
  /* Добавьте переход с задержкой */
  transition: opacity 0.5s ease input1;
}

.image-container:hover img {
  opacity: 1;
}

                     .image-container {
  width: 150px;
  height: 150px;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-container img {
  max-width: 90%;
  max-height: 90%;
  opacity: 0;
  /* Добавьте переход с задержкой */
  transition: opacity 0.5s ease input1;
}

.image-container:hover img {
  opacity: 1;
}

HTML

<div class="image-container">
  <img src="https://naytikurs.ru/img/7.png" alt="Image">
</div>

Задайте изображению начальную прозрачность `opacity: 0;`. Добавьте ему свойство `transition`, указав `opacity`, длительность `0.5s` и задержку `0.7s`. При наведении на родительский контейнер (`.image-container:hover img`), установите `opacity: 1;`.

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

Результат

Сообщения

Выполнить

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