Анимации и доступность [Модуль 9: Анимации]: Тренажер CSS

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

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

Список тем

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

id: 37447_anim-access-1

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

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

Результат

Сообщения

Выполнить

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

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

id: 37447_anim-access-2

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

id: 37447_anim-access-3

Модифицируйте 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 анимации

id: 37447_anim-access-4

Создайте анимацию с именем `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`.

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

Результат

Сообщения

Выполнить

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

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

id: 37447_anim-access-5

Заставьте анимацию `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`, чтобы анимация повторялась неограниченное количество раз.

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

Результат

Сообщения

Выполнить

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

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

id: 37447_anim-access-6

Сделайте так, чтобы при получении фокуса (например, при переходе с помощью клавиши 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`.

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

Результат

Сообщения

Выполнить

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

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

id: 37447_anim-access-7

Заставьте бесконечную анимацию вращения `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

id: 37447_anim-access-8

Создайте эффект появления трех блоков с небольшой задержкой между ними (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

id: 37447_anim-access-9

Анимируйте появление изображения, используя только свойства `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);`. Примените эту анимацию к изображению.

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

Результат

Сообщения

Выполнить

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