Переходы с transition-property: Тренажер CSS

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

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

Список тем

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

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

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

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

Результат

Сообщения

Выполнить

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

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

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

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

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

Результат

Сообщения

Выполнить

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

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

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

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

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

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

Результат

Сообщения

Выполнить

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

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

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

Добавьте плавный переход для свойства `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`.

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

Результат

Сообщения

Выполнить

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

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

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

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

Изначально для элемента задан переход для всех свойств (`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`.

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

Результат

Сообщения

Выполнить

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

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

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

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

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

Результат

Сообщения

Выполнить

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

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