Задержка с transition-delay: Тренажер CSS

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

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

Список тем

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

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

Заставьте круг плавно увеличиваться в размере (свойства `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`) в конце.

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

Результат

Сообщения

Выполнить

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

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

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

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

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

Результат

Сообщения

Выполнить

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

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

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

При наведении на элемент, его прозрачность должна плавно измениться от 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.

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

Результат

Сообщения

Выполнить

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

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

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

Создайте три круга. При наведении на контейнер `.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`.

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

Результат

Сообщения

Выполнить

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

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

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

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

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

Результат

Сообщения

Выполнить

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

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