Переходы для нескольких свойств: Тренажер CSS

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

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

Список тем

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

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

CSS

.box {
  width: 100px;
  height: 100px;
  background-color: steelblue;
  /* Добавьте переход для свойств width и background-color */
  input1: input2, input3;
  input4: 0.4s;
}

.box:hover {
  width: 200px;
  background-color: tomato;
}

                     .box {
  width: 100px;
  height: 100px;
  background-color: steelblue;
  /* Добавьте переход для свойств width и background-color */
  input1: input2, input3;
  input4: 0.4s;
}

.box:hover {
  width: 200px;
  background-color: tomato;
}

HTML

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

Используйте свойство `transition`. Укажите в нем через запятую свойства, которые должны анимироваться (`width`, `background-color`), и общую длительность перехода (например, `0.4s`). Примените это свойство к селектору основного состояния блока, а в селекторе `:hover` укажите конечные значения для `width` и `background-color`.

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

Результат

Сообщения

Выполнить

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

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

Изменение прозрачности и масштаба через shorthand

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

CSS

.box {
  width: 120px;
  height: 120px;
  background-color: mediumseagreen;
  opacity: 1;
  transform: scale(1);
  /* Используйте shorthand transition для opacity и transform */
  input1: input2 0.3s, input3 0.3s;
}

.box:hover {
  opacity: 0.7;
  transform: scale(1.1);
}

                     .box {
  width: 120px;
  height: 120px;
  background-color: mediumseagreen;
  opacity: 1;
  transform: scale(1);
  /* Используйте shorthand transition для opacity и transform */
  input1: input2 0.3s, input3 0.3s;
}

.box:hover {
  opacity: 0.7;
  transform: scale(1.1);
}

HTML

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

Используйте сокращенное свойство `transition`. Перечислите через запятую определения переходов для каждого свойства. Для `opacity` укажите длительность (например, `0.3s`). Для `transform` укажите ту же длительность. В состоянии `:hover` измените `opacity` и добавьте `transform: scale(1.1);`.

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

Результат

Сообщения

Выполнить

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

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

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

Настройте переход так, чтобы при наведении ширина блока изменялась быстро, а высота — медленнее. Используйте сокращенное свойство `transition`.

CSS

.box {
  width: 80px;
  height: 80px;
  background-color: dodgerblue;
  /* Задайте разные длительности для width и height */
  transition: width input1, height input2;
}

.box:hover {
  width: 160px;
  height: 160px;
}

                     .box {
  width: 80px;
  height: 80px;
  background-color: dodgerblue;
  /* Задайте разные длительности для width и height */
  transition: width input1, height input2;
}

.box:hover {
  width: 160px;
  height: 160px;
}

HTML

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

В сокращенном свойстве `transition` перечислите через запятую настройки для `width` и `height`. Укажите для `width` короткую длительность (например, `0.2s`), а для `height` — более длинную (например, `0.8s`). В состоянии `:hover` задайте новые значения для `width` и `height`.

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

Результат

Сообщения

Выполнить

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

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

Разные функции времени для фона и скругления

Сделайте так, чтобы при наведении цвет фона изменялся плавно с эффектом 'ease-in-out', а скругление углов происходило с эффектом 'ease-out'. Оба перехода должны длиться одинаковое время.

CSS

.box {
  width: 100px;
  height: 100px;
  background-color: gold;
  border-radius: 0;
  /* Задайте разные timing-function для background-color и border-radius */
  transition: background-color 0.5s input1, border-radius 0.5s input2;
}

.box:hover {
  background-color: darkorange;
  border-radius: 50%;
}

                     .box {
  width: 100px;
  height: 100px;
  background-color: gold;
  border-radius: 0;
  /* Задайте разные timing-function для background-color и border-radius */
  transition: background-color 0.5s input1, border-radius 0.5s input2;
}

.box:hover {
  background-color: darkorange;
  border-radius: 50%;
}

HTML

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

Используйте свойство `transition`. Перечислите через запятую настройки для `background-color` и `border-radius`. Укажите общую длительность (например, `0.5s`) и соответствующие функции времени (`ease-in-out` для фона, `ease-out` для скругления). В `:hover` измените `background-color` и `border-radius`.

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

Результат

Сообщения

Выполнить

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

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

Разные задержки для смещения и прозрачности

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

CSS

.container {
  position: relative;
  height: 150px;
}
.box {
  position: absolute;
  left: 50px;
  top: 20px;
  width: 80px;
  height: 80px;
  background-color: lightcoral;
  opacity: 1;
  /* Добавьте transition с разной задержкой для left и opacity */
  transition: left 0.3s input1, opacity 0.3s input2;
}

.box:hover {
  left: 10px;
  opacity: 0.5;
}

                     .container {
  position: relative;
  height: 150px;
}
.box {
  position: absolute;
  left: 50px;
  top: 20px;
  width: 80px;
  height: 80px;
  background-color: lightcoral;
  opacity: 1;
  /* Добавьте transition с разной задержкой для left и opacity */
  transition: left 0.3s input1, opacity 0.3s input2;
}

.box:hover {
  left: 10px;
  opacity: 0.5;
}

HTML

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

Задайте блоку `position: relative;` (или `absolute`, если нужно). В свойстве `transition` укажите настройки для `left` и `opacity`. Для `left` установите длительность (например, `0.3s`) без задержки (или `0s`). Для `opacity` установите ту же длительность, но добавьте задержку (`transition-delay`, например, `0.2s`). В состоянии `:hover` измените `left` и `opacity`.

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

Результат

Сообщения

Выполнить

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

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

Анимация тени и поворота

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

CSS

.box {
  width: 100px;
  height: 100px;
  margin: 30px;
  background-color: palegreen;
  box-shadow: none;
  transform: rotate(0deg);
  /* Добавьте transition для box-shadow и transform */
  input1: input2 0.4s, input3 0.4s;
}

.box:hover {
  box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
  transform: rotate(10deg);
}

                     .box {
  width: 100px;
  height: 100px;
  margin: 30px;
  background-color: palegreen;
  box-shadow: none;
  transform: rotate(0deg);
  /* Добавьте transition для box-shadow и transform */
  input1: input2 0.4s, input3 0.4s;
}

.box:hover {
  box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
  transform: rotate(10deg);
}

HTML

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

В свойстве `transition` задайте переходы для `box-shadow` и `transform`. Укажите одинаковую длительность (например, `0.4s`) для обоих свойств. В состоянии `:hover` добавьте `box-shadow` (например, `5px 5px 10px rgba(0,0,0,0.3)`) и `transform: rotate(10deg);`.

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

Результат

Сообщения

Выполнить

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

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

Плавное обесцвечивание и проявление картинки

При наведении на изображение сделайте так, чтобы оно плавно обесцвечивалось (становилось серым) и одновременно становилось немного прозрачнее.

CSS

img {
  display: block;
  width: 200px;
  height: auto;
  filter: grayscale(0%);
  opacity: 1;
  /* Добавьте transition для filter и opacity */
  transition: input1 0.5s, input2 0.5s;
}

img:hover {
  filter: grayscale(100%);
  opacity: 0.8;
}

                     img {
  display: block;
  width: 200px;
  height: auto;
  filter: grayscale(0%);
  opacity: 1;
  /* Добавьте transition для filter и opacity */
  transition: input1 0.5s, input2 0.5s;
}

img:hover {
  filter: grayscale(100%);
  opacity: 0.8;
}

HTML

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

Используйте свойство `transition` для свойств `filter` и `opacity`. Задайте одинаковую длительность, например `0.5s`. В состоянии `:hover` примените `filter: grayscale(100%);` и измените `opacity` (например, на `0.8`).

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

Результат

Сообщения

Выполнить

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

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

Комплексный переход: ширина, фон и скругление

Настройте сложный переход для блока: ширина должна изменяться быстро (`0.2s`, `ease-out`), фон - медленно (`0.6s`, `linear`), а скругление углов - со средней скоростью и задержкой (`0.4s`, `ease-in`, задержка `0.1s`). Используйте одно сокращенное свойство `transition`.

CSS

.box {
  width: 50px;
  height: 50px;
  background-color: rebeccapurple;
  border-radius: 0;
  /* Задайте комплексный transition для width, background-color, border-radius */
  transition: width 0.2s input1, background-color 0.6s input2, border-radius 0.4s input3 input4;
}

.box:hover {
  width: 150px;
  background-color: mediumvioletred;
  border-radius: 15px;
}

                     .box {
  width: 50px;
  height: 50px;
  background-color: rebeccapurple;
  border-radius: 0;
  /* Задайте комплексный transition для width, background-color, border-radius */
  transition: width 0.2s input1, background-color 0.6s input2, border-radius 0.4s input3 input4;
}

.box:hover {
  width: 150px;
  background-color: mediumvioletred;
  border-radius: 15px;
}

HTML

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

В одном свойстве `transition` перечислите через запятую настройки для `width`, `background-color` и `border-radius`, указывая для каждого свойства его длительность, функцию времени и, где необходимо, задержку. Порядок: `property duration timing-function delay`. Например: `width 0.2s ease-out, background-color 0.6s linear, border-radius 0.4s ease-in 0.1s`.

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

Результат

Сообщения

Выполнить

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

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