Анимации и доступность: Тренажер CSS

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

В этой серии заданий вы попрактикуетесь в создании CSS-анимаций, начиная от простых переходов до более сложных ключевых кадров. Особое внимание будет уделено вопросам доступности: как сделать анимации менее навязчивыми для пользователей, предпочитающих уменьшенное движение, и как обеспечить четкую видимость интерактивных элементов. Задания построены по принципу 'от простого к сложному' и помогут закрепить знания по свойствам `transition`, `animation`, `@keyframes`, а также медиа-запросу `prefers-reduced-motion`.

Список тем

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

Сделайте так, чтобы при наведении курсора на кнопку её фоновый цвет плавно изменялся в течение 0.3 секунды. Задействуйте только свойство `background-color` для перехода.

CSS

.button {
  background-color: #4CAF50;
  color: white;
  padding: 15px 25px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  /* Укажите анимируемое свойство */
  input1: background-color;
  /* Укажите длительность перехода */
  input2: 0.3s;
}

.button:hover {
  background-color: #45a049;
}

                     .button {
  background-color: #4CAF50;
  color: white;
  padding: 15px 25px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  /* Укажите анимируемое свойство */
  input1: background-color;
  /* Укажите длительность перехода */
  input2: 0.3s;
}

.button:hover {
  background-color: #45a049;
}

HTML

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

Используйте свойство `transition` для указания анимируемого свойства (`transition-property`) и длительности перехода (`transition-duration`). Примените его к селектору кнопки.

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

Результат

Сообщения

Выполнить

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

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

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

Доработайте предыдущий пример. Теперь при наведении на кнопку должен плавно меняться не только фоновый цвет, но и цвет текста на `#ffff00` (желтый). Оба перехода должны занимать 0.3 секунды.

CSS

.button {
  background-color: #4CAF50;
  color: white;
  padding: 15px 25px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  /* Укажите анимируемые свойства */
  transition-property: input1;
  transition-duration: 0.3s;
}

.button:hover {
  background-color: #45a049;
  color: #ffff00;
}

                     .button {
  background-color: #4CAF50;
  color: white;
  padding: 15px 25px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  /* Укажите анимируемые свойства */
  transition-property: input1;
  transition-duration: 0.3s;
}

.button:hover {
  background-color: #45a049;
  color: #ffff00;
}

HTML

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

В свойстве `transition-property` можно перечислить несколько свойств через запятую. Либо используйте универсальное значение `all`, чтобы анимировать все возможные свойства.

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

Результат

Сообщения

Выполнить

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

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

Уважение к настройкам пользователя (prefers-reduced-motion)

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

CSS

.button {
  background-color: #4CAF50;
  color: white;
  padding: 15px 25px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  transition-property: background-color, color;
  transition-duration: 0.3s;
}

.button:hover {
  background-color: #45a049;
  color: #ffff00;
}

/* Добавьте медиа-запрос для отключения анимации */
input1 (input2: reduce) {
  .button {
    /* Отключите переход */
    input3: none;
  }
}

                     .button {
  background-color: #4CAF50;
  color: white;
  padding: 15px 25px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  transition-property: background-color, color;
  transition-duration: 0.3s;
}

.button:hover {
  background-color: #45a049;
  color: #ffff00;
}

/* Добавьте медиа-запрос для отключения анимации */
input1 (input2: reduce) {
  .button {
    /* Отключите переход */
    input3: none;
  }
}

HTML

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

Используйте медиа-запрос `@media` с условием `prefers-reduced-motion: reduce`. Внутри этого запроса для селектора `.button` обнулите свойства перехода, установив `transition-property: none;` или `transition: none;`.

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

Результат

Сообщения

Выполнить

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

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

Создание простой @keyframes анимации

Создайте анимацию с именем `fadeIn`, которая плавно изменяет прозрачность элемента с 0 до 1. Примените эту анимацию к блоку `div` так, чтобы она длилась 2 секунды.

CSS

/* Определите анимацию */
input1 fadeIn {
  from {
    input2: 0;
  }
  to {
    input2: 1;
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: #2196F3;
  /* Примените имя анимации */
  input3: fadeIn;
  /* Укажите длительность анимации */
  input4: 2s;
  /* Установите конечное состояние анимации */
  animation-fill-mode: forwards; 
}

                     /* Определите анимацию */
input1 fadeIn {
  from {
    input2: 0;
  }
  to {
    input2: 1;
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: #2196F3;
  /* Примените имя анимации */
  input3: fadeIn;
  /* Укажите длительность анимации */
  input4: 2s;
  /* Установите конечное состояние анимации */
  animation-fill-mode: forwards; 
}

HTML

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

Сначала определите анимацию с помощью правила `@keyframes` и заданного имени. Внутри используйте ключевые слова `from` (или `0%`) и `to` (или `100%`) для описания начального и конечного состояний (свойство `opacity`). Затем примените анимацию к элементу с помощью свойств `animation-name` и `animation-duration`.

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

Результат

Сообщения

Выполнить

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

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

Управление повторением анимации

Заставьте анимацию `pulse` (увеличение и уменьшение масштаба) повторяться бесконечно.

CSS

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.icon {
  width: 50px;
  height: 50px;
  background-image: url('https://naytikurs.ru/img/7.png');
  background-size: contain;
  background-repeat: no-repeat;
  margin: 20px auto;
  animation-name: pulse;
  animation-duration: 1.5s;
  /* Укажите количество повторений */
  input1: input2;
}

                     @keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.icon {
  width: 50px;
  height: 50px;
  background-image: url('https://naytikurs.ru/img/7.png');
  background-size: contain;
  background-repeat: no-repeat;
  margin: 20px auto;
  animation-name: pulse;
  animation-duration: 1.5s;
  /* Укажите количество повторений */
  input1: input2;
}

HTML

<div class="icon"></div>

Используйте свойство `animation-iteration-count` со значением `infinite`, чтобы анимация повторялась неограниченное количество раз.

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

Результат

Сообщения

Выполнить

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

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

Четкий фокус для доступности

Сделайте так, чтобы при получении фокуса (например, при переходе с помощью клавиши Tab) ссылка имела четкое видимое очертание синего цвета толщиной 2px, немного отстоящее от текста.

CSS

a {
  color: #007bff;
  text-decoration: none;
  padding: 5px;
  /* Убираем стандартный контур для демонстрации */
  outline: none; 
}

a:input1 {
  /* Задайте стиль, толщину и цвет контура */
  input2: 2px solid blue;
  /* Добавьте отступ для контура */
  input3: 3px;
}

                     a {
  color: #007bff;
  text-decoration: none;
  padding: 5px;
  /* Убираем стандартный контур для демонстрации */
  outline: none; 
}

a:input1 {
  /* Задайте стиль, толщину и цвет контура */
  input2: 2px solid blue;
  /* Добавьте отступ для контура */
  input3: 3px;
}

HTML

<p>Перемещайтесь по ссылкам с помощью Tab:</p>
<a href="#">Ссылка 1</a><br>
<a href="#">Ссылка 2</a>

Используйте псевдокласс `:focus` для стилизации ссылки при получении фокуса. Примените свойство `outline` для создания очертания. Чтобы добавить отступ между текстом и очертанием, используйте `outline-offset`.

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

Результат

Сообщения

Выполнить

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

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

Приостановка анимации при наведении

Заставьте бесконечную анимацию вращения `spin` останавливаться, когда пользователь наводит на нее курсор мыши.

CSS

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spinner {
  width: 60px;
  height: 60px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  margin: 20px auto;
  animation-name: spin;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  /* Укажите функцию времени для линейного вращения */
  animation-timing-function: linear;
}

.spinner:input1 {
  /* Установите состояние анимации на паузу */
  input2: paused;
}

                     @keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spinner {
  width: 60px;
  height: 60px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  margin: 20px auto;
  animation-name: spin;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  /* Укажите функцию времени для линейного вращения */
  animation-timing-function: linear;
}

.spinner:input1 {
  /* Установите состояние анимации на паузу */
  input2: paused;
}

HTML

<div class="spinner"></div>

Используйте псевдокласс `:hover` для элемента с анимацией. Внутри этого правила примените свойство `animation-play-state` со значением `paused`.

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

Результат

Сообщения

Выполнить

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

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

Анимация с задержкой и prefers-reduced-motion

Создайте эффект появления трех блоков с небольшой задержкой между ними (0.2с). Используйте анимацию `slideIn`. Также добавьте правило, чтобы при включенном `prefers-reduced-motion` блоки появлялись сразу, без анимации и задержки.

CSS

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.item {
  width: 80px;
  height: 80px;
  margin: 10px;
  background-color: #ff9800;
  opacity: 0; /* Start hidden */
  animation-name: slideIn;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

.item:nth-child(1) {
  /* Нет задержки для первого */
}

.item:nth-child(2) {
  /* Добавьте задержку для второго */
  input1: 0.2s;
}

.item:nth-child(3) {
  /* Добавьте задержку для третьего */
  input1: 0.4s; /* Подсказка: удвоенная задержка второго */
}

@media (prefers-reduced-motion: reduce) {
  .item,
  .item:nth-child(1),
  .item:nth-child(2),
  .item:nth-child(3) {
    /* Отключите анимацию */
    input2: none;
    /* Сделайте видимым сразу */
    opacity: 1;
  }
}

                     @keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.item {
  width: 80px;
  height: 80px;
  margin: 10px;
  background-color: #ff9800;
  opacity: 0; /* Start hidden */
  animation-name: slideIn;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

.item:nth-child(1) {
  /* Нет задержки для первого */
}

.item:nth-child(2) {
  /* Добавьте задержку для второго */
  input1: 0.2s;
}

.item:nth-child(3) {
  /* Добавьте задержку для третьего */
  input1: 0.4s; /* Подсказка: удвоенная задержка второго */
}

@media (prefers-reduced-motion: reduce) {
  .item,
  .item:nth-child(1),
  .item:nth-child(2),
  .item:nth-child(3) {
    /* Отключите анимацию */
    input2: none;
    /* Сделайте видимым сразу */
    opacity: 1;
  }
}

HTML

<div style="display: flex; justify-content: center;">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

Для каждого блока используйте одну и ту же `animation-name` (`slideIn`) и `animation-duration`. Примените разное значение `animation-delay` для второго и третьего блоков. Внутри медиа-запроса `@media (prefers-reduced-motion: reduce)` для всех блоков установите `animation: none;` и `opacity: 1;` (чтобы они были видны сразу).

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

Результат

Сообщения

Выполнить

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

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

Производительная анимация: transform и opacity

Анимируйте появление изображения, используя только свойства `transform` (для масштабирования от 0.5 до 1) и `opacity` (от 0 до 1). Это более производительный способ по сравнению с анимацией `width` или `height`.

CSS

@keyframes scaleIn {
  0% {
    input1: 0;
    input2: scale(0.5);
  }
  100% {
    input1: 1;
    input2: scale(1);
  }
}

.animated-image {
  display: block;
  margin: 20px auto;
  width: 150px; /* Фиксированный размер */
  height: auto;
  /* Применяем анимацию */
  animation-name: scaleIn;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-fill-mode: backwards; /* Начинаем с 0% состояния */
}

                     @keyframes scaleIn {
  0% {
    input1: 0;
    input2: scale(0.5);
  }
  100% {
    input1: 1;
    input2: scale(1);
  }
}

.animated-image {
  display: block;
  margin: 20px auto;
  width: 150px; /* Фиксированный размер */
  height: auto;
  /* Применяем анимацию */
  animation-name: scaleIn;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-fill-mode: backwards; /* Начинаем с 0% состояния */
}

HTML

<img src="https://naytikurs.ru/img/4.png" alt="Animated Image" class="animated-image">

Создайте `@keyframes` анимацию. В начальном кадре (`0%` или `from`) установите `opacity: 0;` и `transform: scale(0.5);`. В конечном кадре (`100%` или `to`) установите `opacity: 1;` и `transform: scale(1);`. Примените эту анимацию к изображению.

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

Результат

Сообщения

Выполнить

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

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