Сокращенное свойство transition [Модуль 8: Трансформации и переходы]: Тренажер CSS

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

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

Список тем

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

id: 37428_css-transition-shorthand-1

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

CSS

.box {
  width: 100px;
  height: 100px;
  background-color: dodgerblue;
  /* Допишите код здесь */
  input1: input2 input3;
}

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

                     .box {
  width: 100px;
  height: 100px;
  background-color: dodgerblue;
  /* Допишите код здесь */
  input1: input2 input3;
}

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

HTML

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

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

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

Результат

Сообщения

Выполнить

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

Изменение ширины с задержкой

id: 37428_css-transition-shorthand-2

Заставьте прямоугольник плавно изменять свою ширину до 250px при наведении курсора. Анимация должна длиться 1 секунду и начинаться с задержкой в 0.5 секунды. Используйте сокращенное свойство `transition`.

CSS

.resizable-box {
  width: 150px;
  height: 80px;
  background-color: orange;
  /* Допишите код здесь */
  input1: input2 input3 input4;
}

.resizable-box:hover {
  width: 250px;
}

                     .resizable-box {
  width: 150px;
  height: 80px;
  background-color: orange;
  /* Допишите код здесь */
  input1: input2 input3 input4;
}

.resizable-box:hover {
  width: 250px;
}

HTML

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

Используйте сокращенное свойство `transition`. Укажите анимируемое свойство (`width`), длительность (`1s`) и задержку (`0.5s`). Порядок важен: свойство, длительность, задержка.

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

Результат

Сообщения

Выполнить

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

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

id: 37428_css-transition-shorthand-3

Сделайте так, чтобы текст внутри блока плавно появлялся (изменял прозрачность от 0 до 1) при наведении на блок. Анимация должна длиться 0.8 секунды и использовать функцию плавности `ease-in-out`.

CSS

.fade-text-container {
  padding: 20px;
  background-color: #f0f0f0;
  width: 200px;
}

.fade-text-container p {
  opacity: 0;
  color: #333;
  /* Допишите код здесь */
  input1: input2 input3 input4;
}

.fade-text-container:hover p {
  opacity: 1;
}

                     .fade-text-container {
  padding: 20px;
  background-color: #f0f0f0;
  width: 200px;
}

.fade-text-container p {
  opacity: 0;
  color: #333;
  /* Допишите код здесь */
  input1: input2 input3 input4;
}

.fade-text-container:hover p {
  opacity: 1;
}

HTML

<div class="fade-text-container">
  <p>Этот текст появится плавно.</p>
</div>

Примените `transition` к свойству `opacity`. Укажите длительность (`0.8s`) и функцию плавности (`ease-in-out`). Порядок: свойство, длительность, функция плавности.

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

Результат

Сообщения

Выполнить

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

Масштабирование и поворот

id: 37428_css-transition-shorthand-4

При наведении на изображение оно должно плавно увеличиться в 1.2 раза и повернуться на 15 градусов. Анимация должна применяться к свойству `transform`, длиться 0.5 секунды и использовать функцию плавности `ease`.

CSS

.transform-img {
  width: 150px;
  height: auto;
  display: block;
  margin: 20px auto;
  /* Допишите код здесь */
  input1: input2 input3 input4;
}

.transform-img:hover {
  transform: scale(1.2) rotate(15deg);
}

                     .transform-img {
  width: 150px;
  height: auto;
  display: block;
  margin: 20px auto;
  /* Допишите код здесь */
  input1: input2 input3 input4;
}

.transform-img:hover {
  transform: scale(1.2) rotate(15deg);
}

HTML

<img src="https://naytikurs.ru/img/7.png" alt="Картинка" class="transform-img">

Используйте `transition` для свойства `transform`. Укажите длительность (`0.5s`) и функцию плавности (`ease`). Порядок: свойство, длительность, функция плавности.

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

Результат

Сообщения

Выполнить

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

Анимация всех свойств

id: 37428_css-transition-shorthand-5

Сделайте так, чтобы при наведении на круглый элемент плавно изменялись его цвет фона (на `tomato`), радиус тени (`box-shadow`) и размер (`transform: scale`). Анимация должна применяться ко всем изменяемым свойствам, длиться 0.7 секунды и иметь задержку 0.1 секунды.

CSS

.circle {
  width: 100px;
  height: 100px;
  background-color: steelblue;
  border-radius: 50%;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
  margin: 30px auto;
  /* Допишите код здесь */
  input1: input2 input3 input4;
}

.circle:hover {
  background-color: tomato;
  box-shadow: 4px 4px 15px rgba(0,0,0,0.5);
  transform: scale(1.1);
}

                     .circle {
  width: 100px;
  height: 100px;
  background-color: steelblue;
  border-radius: 50%;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
  margin: 30px auto;
  /* Допишите код здесь */
  input1: input2 input3 input4;
}

.circle:hover {
  background-color: tomato;
  box-shadow: 4px 4px 15px rgba(0,0,0,0.5);
  transform: scale(1.1);
}

HTML

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

Используйте ключевое слово `all` в качестве анимируемого свойства в `transition`, чтобы применить переход ко всем изменяемым свойствам. Укажите длительность (`0.7s`) и задержку (`0.1s`). Порядок: `all`, длительность, задержка.

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

Результат

Сообщения

Выполнить

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

Комплексный переход

id: 37428_css-transition-shorthand-6

Настройте плавный переход для кнопки. При наведении курсора цвет фона должен измениться на `darkcyan`, цвет текста на `white`, а сама кнопка немного сдвинуться вниз (`transform: translateY(3px)`). Анимация должна длиться 0.3 секунды, использовать функцию `linear` и начинаться без задержки.

CSS

.button {
  padding: 10px 20px;
  border: none;
  background-color: lightseagreen;
  color: #333;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
  /* Допишите код здесь */
  input1: input2 input3 input4;
}

.button:hover {
  background-color: darkcyan;
  color: white;
  transform: translateY(3px);
}

                     .button {
  padding: 10px 20px;
  border: none;
  background-color: lightseagreen;
  color: #333;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
  /* Допишите код здесь */
  input1: input2 input3 input4;
}

.button:hover {
  background-color: darkcyan;
  color: white;
  transform: translateY(3px);
}

HTML

<button class="button">Наведи на меня</button>

Используйте `transition` со значением `all`, чтобы анимировать все изменения. Укажите длительность (`0.3s`) и функцию плавности (`linear`). Задержка по умолчанию равна 0, поэтому ее можно не указывать явно, но для полноты можно добавить `0s`. Порядок: `all`, длительность, функция плавности, [задержка].

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

Результат

Сообщения

Выполнить

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

Анимация границы и тени

id: 37428_css-transition-shorthand-7

Сделайте так, чтобы при наведении на карточку плавно изменялся цвет ее рамки на `orangered` и усиливалась тень (`box-shadow`). Анимация должна длиться 0.6 секунды, использовать функцию `ease-out` и иметь задержку 0.2 секунды.

CSS

.card {
  width: 200px;
  padding: 15px;
  border: 2px solid lightgray;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  border-radius: 4px;
  margin: 20px;
  /* Допишите код здесь */
  input1: input2 input3 input4 input5;
}

.card:hover {
  border-color: orangered;
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

                     .card {
  width: 200px;
  padding: 15px;
  border: 2px solid lightgray;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  border-radius: 4px;
  margin: 20px;
  /* Допишите код здесь */
  input1: input2 input3 input4 input5;
}

.card:hover {
  border-color: orangered;
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

HTML

<div class="card">
  <h4>Карточка товара</h4>
  <p>Описание товара...</p>
</div>

Используйте `transition` со значением `all`, чтобы анимировать и `border-color`, и `box-shadow`. Укажите длительность (`0.6s`), функцию плавности (`ease-out`) и задержку (`0.2s`). Порядок: `all`, длительность, функция плавности, задержка.

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

Результат

Сообщения

Выполнить

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

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

id: 37428_css-transition-shorthand-8

Настройте переход для элемента списка. При наведении он должен плавно изменить цвет фона на `#e0f7fa`, цвет текста на `#00796b` и левый отступ (`padding-left`). Анимация должна длиться 0.25 секунды и использовать функцию `ease`.

CSS

ul {
  list-style: none;
  padding: 0;
  width: 250px;
}

li {
  padding: 10px 15px;
  background-color: #f1f1f1;
  color: #555;
  margin-bottom: 5px;
  border-radius: 3px;
  /* Допишите код здесь */
  input1: input2 input3 input4;
}

li:hover {
  background-color: #e0f7fa;
  color: #00796b;
  padding-left: 25px;
}

                     ul {
  list-style: none;
  padding: 0;
  width: 250px;
}

li {
  padding: 10px 15px;
  background-color: #f1f1f1;
  color: #555;
  margin-bottom: 5px;
  border-radius: 3px;
  /* Допишите код здесь */
  input1: input2 input3 input4;
}

li:hover {
  background-color: #e0f7fa;
  color: #00796b;
  padding-left: 25px;
}

HTML

<ul>
  <li>Элемент списка 1</li>
  <li>Элемент списка 2</li>
  <li>Элемент списка 3</li>
</ul>

Используйте `transition` со значением `all`, чтобы анимировать все три свойства (`background-color`, `color`, `padding-left`). Укажите длительность (`0.25s`) и функцию плавности (`ease`). Задержка не требуется.

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

Результат

Сообщения

Выполнить

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