Анимации с использованием переменных: Тренажер CSS

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

Эта серия упражнений поможет вам попрактиковаться в использовании переменных CSS (также известных как custom properties) для управления анимациями. Вы будете работать с готовым HTML и CSS кодом, где потребуется заполнить пропуски, чтобы анимации заработали или изменились согласно заданию. Задания охватывают применение переменных для управления длительностью, задержкой, направлением, функциями времени и другими параметрами анимаций, а также их динамическое изменение.

Список тем

Переменная для длительности анимации

В этом задании вам нужно использовать переменную CSS для установки длительности анимации вращения квадрата. Определите переменную `--rotation-speed` в селекторе `:root` и присвойте ей значение `3s`. Затем используйте эту переменную в свойстве `animation-duration` для элемента с классом `box`.

CSS

:root {
  input1: 3s;
}

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

.box {
  width: 50px;
  height: 50px;
  background-color: dodgerblue;
  margin: 50px auto;
  animation-name: spin;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  input2: var(--rotation-speed);
}

                     :root {
  input1: 3s;
}

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

.box {
  width: 50px;
  height: 50px;
  background-color: dodgerblue;
  margin: 50px auto;
  animation-name: spin;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  input2: var(--rotation-speed);
}

HTML

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

Сначала объявите переменную внутри псевдокласса `:root` с помощью синтаксиса `--имя-переменной: значение;`. Затем, чтобы использовать значение переменной, примените функцию `var(--имя-переменной)` в качестве значения для свойства `animation-duration` у селектора `.box`.

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

Результат

Сообщения

Выполнить

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

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

Использование нескольких переменных в анимации

Заставьте круг плавно изменять свой размер. Определите две переменные в `:root`: `--anim-duration` со значением `2s` и `--anim-timing` со значением `ease-in-out`. Используйте эти переменные в сокращенном свойстве `animation` для элемента с классом `circle`.

CSS

:root {
  input1: 2s;
  input2: ease-in-out;
}

@keyframes pulse {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.2);
  }
}

.circle {
  width: 60px;
  height: 60px;
  background-color: tomato;
  border-radius: 50%;
  margin: 50px auto;
  animation: pulse input3 input4 infinite alternate;
}

                     :root {
  input1: 2s;
  input2: ease-in-out;
}

@keyframes pulse {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.2);
  }
}

.circle {
  width: 60px;
  height: 60px;
  background-color: tomato;
  border-radius: 50%;
  margin: 50px auto;
  animation: pulse input3 input4 infinite alternate;
}

HTML

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

Объявите переменные `--anim-duration` и `--anim-timing` в `:root`. Затем в селекторе `.circle` используйте свойство `animation`. Укажите имя анимации (`pulse`), затем используйте `var(--anim-duration)` для длительности и `var(--anim-timing)` для функции времени. Не забудьте добавить `infinite alternate` для непрерывного и плавного эффекта.

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

Результат

Сообщения

Выполнить

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

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

Переменная внутри @keyframes

Создайте анимацию движения элемента по горизонтали. Определите переменную `--move-distance` со значением `150px` в селекторе элемента `.mover`. Используйте эту переменную внутри правила `@keyframes moveRight` для задания конечного значения `translateX`.

CSS

@keyframes moveRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(input1);
  }
}

.mover {
  input2: 150px;
  width: 40px;
  height: 40px;
  background-color: mediumseagreen;
  margin: 50px 20px;
  animation: moveRight 2.5s infinite alternate ease-in-out;
}

                     @keyframes moveRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(input1);
  }
}

.mover {
  input2: 150px;
  width: 40px;
  height: 40px;
  background-color: mediumseagreen;
  margin: 50px 20px;
  animation: moveRight 2.5s infinite alternate ease-in-out;
}

HTML

<div class="mover"></div>

Объявите переменную `--move-distance` прямо в селекторе `.mover`. Внутри `@keyframes moveRight`, в блоке `to`, используйте `transform: translateX(var(--move-distance));`.

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

Результат

Сообщения

Выполнить

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

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

Изменение переменной при наведении

Используйте переменную CSS для управления скоростью анимации. Задайте элементу `.spinner` анимацию вращения `spin`. Определите переменную `--spin-speed` со значением `4s` для элемента `.spinner`. При наведении курсора на элемент (`.spinner:hover`), измените значение переменной `--spin-speed` на `1s`, чтобы ускорить вращение.

CSS

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

.spinner {
  input1: 4s;
  width: 50px;
  height: 50px;
  border: 5px solid lightblue;
  border-top-color: steelblue;
  border-radius: 50%;
  margin: 50px auto;
  animation: spin var(--spin-speed) linear infinite;
}

.spinner:hover {
  input2: 1s;
}

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

.spinner {
  input1: 4s;
  width: 50px;
  height: 50px;
  border: 5px solid lightblue;
  border-top-color: steelblue;
  border-radius: 50%;
  margin: 50px auto;
  animation: spin var(--spin-speed) linear infinite;
}

.spinner:hover {
  input2: 1s;
}

HTML

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

Объявите переменную `--spin-speed: 4s;` в селекторе `.spinner`. Затем добавьте правило `.spinner:hover` и внутри него переопределите ту же переменную: `--spin-speed: 1s;`. В свойстве `animation` используйте `var(--spin-speed)` для задания длительности.

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

Результат

Сообщения

Выполнить

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

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

Переменная для задержки анимации и calc()

Создайте эффект последовательного появления нескольких блоков. Определите базовую задержку `--base-delay` равную `0.2s` в селекторе контейнера `.container`. Для каждого элемента `.item` используйте эту переменную для вычисления `animation-delay` так, чтобы каждый следующий блок появлялся с дополнительной задержкой, равной `--base-delay`.

CSS

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

.container {
  input1: 0.2s;
  display: flex;
  justify-content: space-around;
  padding-top: 50px;
}

.item {
  width: 50px;
  height: 50px;
  background-color: gold;
  opacity: 0; /* Start hidden */
  animation: fadeIn 0.5s ease-out forwards;
  animation-delay: input2; /* Base delay for the first item */
}

.item:nth-child(2) {
  animation-delay: calc(var(--base-delay) * input3);
}

.item:nth-child(3) {
  animation-delay: calc(var(--base-delay) * input4);
}

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

.container {
  input1: 0.2s;
  display: flex;
  justify-content: space-around;
  padding-top: 50px;
}

.item {
  width: 50px;
  height: 50px;
  background-color: gold;
  opacity: 0; /* Start hidden */
  animation: fadeIn 0.5s ease-out forwards;
  animation-delay: input2; /* Base delay for the first item */
}

.item:nth-child(2) {
  animation-delay: calc(var(--base-delay) * input3);
}

.item:nth-child(3) {
  animation-delay: calc(var(--base-delay) * input4);
}

HTML

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Объявите `--base-delay: 0.2s;` в `.container`. Для `.item` установите базовую `animation-delay: var(--base-delay);`. Затем для каждого следующего элемента (`.item:nth-child(2)`, `.item:nth-child(3)` и т.д.) переопределите `animation-delay`, используя функцию `calc()` для умножения базовой задержки на порядковый номер: `calc(var(--base-delay) * 2)`, `calc(var(--base-delay) * 3)` и т.д.

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

Результат

Сообщения

Выполнить

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

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

Переменная для направления анимации

Управляйте направлением анимации 'маятник' с помощью переменной. Задайте анимацию `swing` для элемента `.pendulum`. Определите переменную `--swing-direction` со значением `alternate` в `:root`. Используйте эту переменную для свойства `animation-direction`.

CSS

:root {
  input1: alternate;
}

@keyframes swing {
  0% {
    transform: rotate(-15deg);
  }
  100% {
    transform: rotate(15deg);
  }
}

.pendulum {
  width: 10px;
  height: 100px;
  background-color: gray;
  margin: 30px auto;
  transform-origin: top center;
  animation-name: swing;
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  input2: var(--swing-direction);
}

                     :root {
  input1: alternate;
}

@keyframes swing {
  0% {
    transform: rotate(-15deg);
  }
  100% {
    transform: rotate(15deg);
  }
}

.pendulum {
  width: 10px;
  height: 100px;
  background-color: gray;
  margin: 30px auto;
  transform-origin: top center;
  animation-name: swing;
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  input2: var(--swing-direction);
}

HTML

<div class="pendulum"></div>

Объявите переменную `--swing-direction: alternate;` в псевдоклассе `:root`. Затем в селекторе `.pendulum` примените эту переменную к свойству `animation-direction: var(--swing-direction);`.

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

Результат

Сообщения

Выполнить

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

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

Переменная для количества повторений

Заставьте анимацию исчезновения изображения проиграться только определенное количество раз. Используйте переменную `--fade-repeats` со значением `3` для управления свойством `animation-iteration-count` у элемента с `id="disappearing-image"`.

CSS

@keyframes fadeOut {
  to {
    opacity: 0;
  }
}

#disappearing-image {
  input1: 3;
  display: block;
  margin: 30px auto;
  width: 100px;
  animation-name: fadeOut;
  animation-duration: 1s;
  animation-timing-function: ease-in;
  input2: var(--fade-repeats);
  animation-fill-mode: forwards; /* Остановить в конечном состоянии */
}

                     @keyframes fadeOut {
  to {
    opacity: 0;
  }
}

#disappearing-image {
  input1: 3;
  display: block;
  margin: 30px auto;
  width: 100px;
  animation-name: fadeOut;
  animation-duration: 1s;
  animation-timing-function: ease-in;
  input2: var(--fade-repeats);
  animation-fill-mode: forwards; /* Остановить в конечном состоянии */
}

HTML

<img id="disappearing-image" src="https://naytikurs.ru/img/7.png" alt="Fading image">

Объявите переменную `--fade-repeats: 3;` в селекторе `#disappearing-image`. Затем используйте `animation-iteration-count: var(--fade-repeats);`.

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

Результат

Сообщения

Выполнить

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

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

Наследование переменной для анимации

Продемонстрируйте наследование переменной CSS. Определите переменную `--base-speed` со значением `5s` в `:root`. Затем переопределите эту же переменную `--base-speed` в селекторе `.fast-container` на `1s`. Оба элемента `.box` (один внутри `.fast-container`, другой нет) используют `var(--base-speed)` для своей анимации `spin`. Наблюдайте разницу в скорости.

CSS

:root {
  input1: 5s;
}

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

.box {
  width: 40px;
  height: 40px;
  background-color: purple;
  margin: 30px auto;
  animation-name: spin;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: input2; /* Используем переменную */
}

.fast-container {
  margin-top: 20px;
  padding: 10px;
  border: 1px dashed gray;
  input3: 1s; /* Переопределяем переменную */
}

                     :root {
  input1: 5s;
}

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

.box {
  width: 40px;
  height: 40px;
  background-color: purple;
  margin: 30px auto;
  animation-name: spin;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: input2; /* Используем переменную */
}

.fast-container {
  margin-top: 20px;
  padding: 10px;
  border: 1px dashed gray;
  input3: 1s; /* Переопределяем переменную */
}

HTML

<div>
  <p>Медленный:</p>
  <div class="box"></div>
</div>
<div class="fast-container">
  <p>Быстрый (в контейнере):</p>
  <div class="box"></div>
</div>

Объявите `--base-speed: 5s;` в `:root`. Затем в `.fast-container` переопределите `--base-speed: 1s;`. Убедитесь, что селектор `.box` использует `animation-duration: var(--base-speed);`. Ничего дописывать в `.box` не нужно, просто использовать переменную.

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

Результат

Сообщения

Выполнить

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

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