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

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

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

Список тем

Плавное изменение фона при наведении

id: 37430_transition-ex-1

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

CSS

.interactive-box {
  width: 100px;
  height: 100px;
  background-color: steelblue;
  /* Добавьте свойство transition для плавного изменения фона */
  input1: background-color 0.3s;
}

.interactive-box:input2 {
  background-color: lightcoral;
}

                     .interactive-box {
  width: 100px;
  height: 100px;
  background-color: steelblue;
  /* Добавьте свойство transition для плавного изменения фона */
  input1: background-color 0.3s;
}

.interactive-box:input2 {
  background-color: lightcoral;
}

HTML

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

Используйте псевдокласс `:hover` для задания стилей при наведении. Чтобы сделать изменение цвета плавным, добавьте свойство `transition` к основному селектору блока. Укажите в нем анимируемое свойство (`background-color`) и длительность перехода (`0.3s`).

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

Результат

Сообщения

Выполнить

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

Переход для конкретного свойства

id: 37430_transition-ex-2

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

CSS

.styled-button {
  padding: 15px 25px;
  border: none;
  background-color: darkcyan;
  color: white;
  cursor: pointer;
  /* Укажите, какое свойство должно анимироваться */
  input1: color;
  /* Задайте длительность перехода */
  input2: 0.5s;
}

.styled-button:hover {
  background-color: teal;
  color: yellow;
}

                     .styled-button {
  padding: 15px 25px;
  border: none;
  background-color: darkcyan;
  color: white;
  cursor: pointer;
  /* Укажите, какое свойство должно анимироваться */
  input1: color;
  /* Задайте длительность перехода */
  input2: 0.5s;
}

.styled-button:hover {
  background-color: teal;
  color: yellow;
}

HTML

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

Используйте свойство `transition-property`, чтобы указать, к какому именно свойству применять переход (в данном случае `color`). Затем задайте длительность с помощью `transition-duration`. Для мгновенного изменения фона не указывайте `background-color` в `transition-property`.

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

Результат

Сообщения

Выполнить

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

Использование временной функции

id: 37430_transition-ex-3

Заставьте блок плавно увеличиваться при наведении с использованием временной функции `ease-in-out`. Переход должен длиться 0.4 секунды.

CSS

.scale-box {
  width: 80px;
  height: 80px;
  background-color: mediumpurple;
  margin: 20px;
  /* Добавьте переход для свойства transform */
  input1: transform 0.4s input2;
}

.scale-box:hover {
  transform: scale(1.2);
}

                     .scale-box {
  width: 80px;
  height: 80px;
  background-color: mediumpurple;
  margin: 20px;
  /* Добавьте переход для свойства transform */
  input1: transform 0.4s input2;
}

.scale-box:hover {
  transform: scale(1.2);
}

HTML

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

Добавьте свойство `transition` к блоку. Укажите анимируемое свойство (`transform`), длительность (`0.4s`) и временную функцию (`ease-in-out`). Для увеличения используйте `transform: scale(1.2);` в состоянии `:hover`.

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

Результат

Сообщения

Выполнить

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

Добавление задержки перед переходом

id: 37430_transition-ex-4

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

CSS

.delayed-button {
  padding: 15px 25px;
  border: none;
  background-color: tomato;
  color: white;
  cursor: pointer;
  transition-property: background-color;
  transition-duration: 0.3s;
  /* Добавьте задержку перед началом перехода */
  input1: 1s;
}

.delayed-button:input2 {
  background-color: gold;
}

                     .delayed-button {
  padding: 15px 25px;
  border: none;
  background-color: tomato;
  color: white;
  cursor: pointer;
  transition-property: background-color;
  transition-duration: 0.3s;
  /* Добавьте задержку перед началом перехода */
  input1: 1s;
}

.delayed-button:input2 {
  background-color: gold;
}

HTML

<button class="delayed-button">Наведи и подожди</button>

Используйте свойство `transition-delay`, чтобы установить задержку перед началом перехода. Также не забудьте указать анимируемое свойство (`background-color`) и длительность (`transition-duration`).

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

Результат

Сообщения

Выполнить

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

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

id: 37430_transition-ex-5

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

CSS

.multi-transition-box {
  width: 100px;
  height: 100px;
  background-color: cornflowerblue;
  /* Настройте переходы для width и background-color */
  input1: width 0.5s, input2 0.8s;
}

.multi-transition-box:hover {
  width: 150px;
  background-color: lightgreen;
}

                     .multi-transition-box {
  width: 100px;
  height: 100px;
  background-color: cornflowerblue;
  /* Настройте переходы для width и background-color */
  input1: width 0.5s, input2 0.8s;
}

.multi-transition-box:hover {
  width: 150px;
  background-color: lightgreen;
}

HTML

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

В свойстве `transition` можно перечислить несколько переходов через запятую. Для каждого перехода укажите анимируемое свойство и его длительность. Например: `transition: width 0.5s, background-color 0.8s;`.

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

Результат

Сообщения

Выполнить

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

Использование shorthand свойства transition

id: 37430_transition-ex-6

Используя краткую запись свойства `transition`, настройте плавное изменение прозрачности изображения при наведении. Переход должен длиться 0.4 секунды, использовать временную функцию `linear` и иметь задержку 0.1 секунды.

CSS

.image-fade {
  width: 150px;
  display: block;
  opacity: 1;
  /* Используйте shorthand свойство transition */
  /* Укажите свойство, длительность, функцию и задержку */
  input1: opacity 0.4s input2 0.1s;
}

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

                     .image-fade {
  width: 150px;
  display: block;
  opacity: 1;
  /* Используйте shorthand свойство transition */
  /* Укажите свойство, длительность, функцию и задержку */
  input1: opacity 0.4s input2 0.1s;
}

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

HTML

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

Краткая запись `transition` позволяет указать все параметры в одном свойстве: `transition: [property] [duration] [timing-function] [delay];`. Порядок важен, но `duration` должен идти перед `delay`. Если `property` не указан, переход применяется ко всем анимируемым свойствам.

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

Результат

Сообщения

Выполнить

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

Переход при получении фокуса

id: 37430_transition-ex-7

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

CSS

input.focusable-input {
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 0 0px rgba(0, 123, 255, 0);
  /* Добавьте плавный переход для всех свойств */
  input1: all 0.2s ease-out;
}

input.focusable-input:input2 {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
  outline: none; /* Убираем стандартную обводку браузера */
}

                     input.focusable-input {
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 0 0px rgba(0, 123, 255, 0);
  /* Добавьте плавный переход для всех свойств */
  input1: all 0.2s ease-out;
}

input.focusable-input:input2 {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
  outline: none; /* Убираем стандартную обводку браузера */
}

HTML

<input type="text" class="focusable-input" placeholder="Кликни сюда">

Используйте псевдокласс `:focus` для стилизации элемента при получении фокуса. Примените свойство `transition` к основному селектору поля ввода, указав длительность `0.2s`. Не указывайте конкретное свойство в `transition`, чтобы переход применялся ко всем изменениям (`border-color` и `box-shadow`).

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

Результат

Сообщения

Выполнить

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