Сокращенное свойство transition: Тренажер CSS

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

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

Список тем

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

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

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

Результат

Сообщения

Выполнить

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

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

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

Заставьте прямоугольник плавно изменять свою ширину до 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`). Порядок важен: свойство, длительность, задержка.

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

Результат

Сообщения

Выполнить

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

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

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

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

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

Результат

Сообщения

Выполнить

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

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

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

При наведении на изображение оно должно плавно увеличиться в 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`). Порядок: свойство, длительность, функция плавности.

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

Результат

Сообщения

Выполнить

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

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

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

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

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

Результат

Сообщения

Выполнить

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

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

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

Настройте плавный переход для кнопки. При наведении курсора цвет фона должен измениться на `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`, длительность, функция плавности, [задержка].

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

Результат

Сообщения

Выполнить

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

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

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

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

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

Результат

Сообщения

Выполнить

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

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

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

Настройте переход для элемента списка. При наведении он должен плавно изменить цвет фона на `#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`). Задержка не требуется.

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

Результат

Сообщения

Выполнить

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

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