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

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

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

Список тем

Плавное изменение цвета фона

id: 37424_tp-01

Сделайте так, чтобы при наведении курсора на синий квадрат его цвет плавно изменялся на красный. Длительность перехода уже задана, вам нужно указать только свойство, которое должно анимироваться.

CSS

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  /* Укажите свойство для перехода */
  transition-property: input1;
  transition-duration: 0.5s;
}

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

                     .box {
  width: 100px;
  height: 100px;
  background-color: blue;
  /* Укажите свойство для перехода */
  transition-property: input1;
  transition-duration: 0.5s;
}

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

HTML

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

Чтобы переход применялся только к изменению цвета фона, используйте свойство `transition-property` со значением `background-color`.

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

Результат

Сообщения

Выполнить

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

Плавное изменение ширины

id: 37424_tp-02

Заставьте зеленый прямоугольник плавно увеличивать свою ширину при наведении курсора. Остальные свойства (например, цвет фона) не должны иметь плавного перехода. Укажите только одно свойство для `transition-property`.

CSS

.resizable-box {
  width: 150px;
  height: 80px;
  background-color: green;
  /* Укажите свойство для плавного изменения */
  transition-property: input1;
  transition-duration: 0.4s;
}

.resizable-box:hover {
  width: 250px;
  background-color: darkgreen; /* Это изменение не должно быть плавным */
}

                     .resizable-box {
  width: 150px;
  height: 80px;
  background-color: green;
  /* Укажите свойство для плавного изменения */
  transition-property: input1;
  transition-duration: 0.4s;
}

.resizable-box:hover {
  width: 250px;
  background-color: darkgreen; /* Это изменение не должно быть плавным */
}

HTML

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

Вам нужно анимировать изменение ширины. Используйте свойство `transition-property` со значением `width`.

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

Результат

Сообщения

Выполнить

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

Переход для нескольких свойств

id: 37424_tp-03

Сделайте так, чтобы при наведении на элемент одновременно плавно изменялись его ширина и цвет фона. Укажите оба свойства через запятую в `transition-property`.

CSS

.multi-transition {
  width: 120px;
  height: 120px;
  background-color: orange;
  border-radius: 5px;
  /* Укажите свойства для перехода через запятую */
  transition-property: input1;
  transition-duration: 0.6s;
}

.multi-transition:hover {
  width: 200px;
  background-color: darkorange;
  border-radius: 50%; /* Это свойство не должно анимироваться */
}

                     .multi-transition {
  width: 120px;
  height: 120px;
  background-color: orange;
  border-radius: 5px;
  /* Укажите свойства для перехода через запятую */
  transition-property: input1;
  transition-duration: 0.6s;
}

.multi-transition:hover {
  width: 200px;
  background-color: darkorange;
  border-radius: 50%; /* Это свойство не должно анимироваться */
}

HTML

<div class="multi-transition"></div>

Чтобы анимировать несколько свойств, перечислите их имена через запятую в значении `transition-property`. Например: `width, background-color`.

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

Результат

Сообщения

Выполнить

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

Использование 'all' для всех свойств

id: 37424_tp-04

Примените плавный переход ко всем изменяемым свойствам элемента при наведении. Используйте для этого специальное ключевое слово в `transition-property`.

CSS

.all-transition {
  width: 100px;
  height: 100px;
  background-color: purple;
  opacity: 1;
  transform: rotate(0deg);
  /* Примените переход ко всем свойствам */
  transition-property: input1;
  transition-duration: 0.7s;
}

.all-transition:hover {
  width: 150px;
  background-color: mediumpurple;
  opacity: 0.7;
  transform: rotate(45deg);
}

                     .all-transition {
  width: 100px;
  height: 100px;
  background-color: purple;
  opacity: 1;
  transform: rotate(0deg);
  /* Примените переход ко всем свойствам */
  transition-property: input1;
  transition-duration: 0.7s;
}

.all-transition:hover {
  width: 150px;
  background-color: mediumpurple;
  opacity: 0.7;
  transform: rotate(45deg);
}

HTML

<div class="all-transition"></div>

Чтобы применить переход ко всем свойствам, которые могут быть анимированы, используйте ключевое слово `all` в качестве значения для `transition-property`.

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

Результат

Сообщения

Выполнить

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

Плавное появление тени

id: 37424_tp-05

Добавьте плавный переход для свойства `box-shadow` при наведении на карточку. Другие свойства меняться не будут.

CSS

.card {
  padding: 20px;
  border: 1px solid #ccc;
  background-color: white;
  box-shadow: none;
  /* Укажите свойство для анимации тени */
  transition-property: input1;
  transition-duration: 0.3s;
}

.card:hover {
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}

                     .card {
  padding: 20px;
  border: 1px solid #ccc;
  background-color: white;
  box-shadow: none;
  /* Укажите свойство для анимации тени */
  transition-property: input1;
  transition-duration: 0.3s;
}

.card:hover {
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}

HTML

<div class="card">
  Наведите на меня
</div>

Чтобы анимировать только тень, укажите `box-shadow` в качестве значения для `transition-property`.

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

Результат

Сообщения

Выполнить

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

Анимация прозрачности изображения

id: 37424_tp-06

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

CSS

.image-fade {
  width: 200px; /* Ширина ограничена для iframe */
  height: auto;
  opacity: 1;
  display: block;
  /* Укажите свойство для анимации прозрачности */
  transition-property: input1;
  transition-duration: 0.5s;
}

.image-fade:hover {
  opacity: 0.6;
}

                     .image-fade {
  width: 200px; /* Ширина ограничена для iframe */
  height: auto;
  opacity: 1;
  display: block;
  /* Укажите свойство для анимации прозрачности */
  transition-property: input1;
  transition-duration: 0.5s;
}

.image-fade:hover {
  opacity: 0.6;
}

HTML

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

Свойство, отвечающее за прозрачность элемента, называется `opacity`. Укажите его в `transition-property`.

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

Результат

Сообщения

Выполнить

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

Отключение перехода с 'none'

id: 37424_tp-07

Изначально для элемента задан переход для всех свойств (`all`). Ваша задача — сделать так, чтобы при наведении курсора переход не срабатывал, и изменения происходили мгновенно. Используйте для этого специальное значение `transition-property` в состоянии `:hover`.

CSS

.no-transition-on-hover {
  width: 100px;
  height: 100px;
  background-color: teal;
  border-radius: 0;
  /* Изначально переход для всех свойств */
  transition-property: all;
  transition-duration: 1s;
}

.no-transition-on-hover:hover {
  background-color: cyan;
  border-radius: 50%;
  /* Отключите переход при наведении */
  transition-property: input1;
}

                     .no-transition-on-hover {
  width: 100px;
  height: 100px;
  background-color: teal;
  border-radius: 0;
  /* Изначально переход для всех свойств */
  transition-property: all;
  transition-duration: 1s;
}

.no-transition-on-hover:hover {
  background-color: cyan;
  border-radius: 50%;
  /* Отключите переход при наведении */
  transition-property: input1;
}

HTML

<div class="no-transition-on-hover"></div>

Чтобы отменить или отключить переходы для элемента (или в определенном его состоянии), используйте значение `none` для свойства `transition-property`.

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

Результат

Сообщения

Выполнить

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

Переход для трансформации и границы

id: 37424_tp-08

Заставьте элемент плавно поворачиваться и изменять стиль границы при наведении курсора. Укажите оба свойства (`transform` и `border`) в `transition-property`.

CSS

.transform-border {
  width: 100px;
  height: 100px;
  background-color: lightcoral;
  border: 5px solid black;
  margin: 30px;
  transform: rotate(0deg);
  /* Укажите свойства transform и border для перехода */
  transition-property: input1;
  transition-duration: 0.5s;
}

.transform-border:hover {
  transform: rotate(180deg);
  border: 10px dashed red;
}

                     .transform-border {
  width: 100px;
  height: 100px;
  background-color: lightcoral;
  border: 5px solid black;
  margin: 30px;
  transform: rotate(0deg);
  /* Укажите свойства transform и border для перехода */
  transition-property: input1;
  transition-duration: 0.5s;
}

.transform-border:hover {
  transform: rotate(180deg);
  border: 10px dashed red;
}

HTML

<div class="transform-border"></div>

Перечислите свойства `transform` и `border` через запятую в значении `transition-property`, чтобы анимировать их одновременно.

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

Результат

Сообщения

Выполнить

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