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

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

На этой странице собраны упражнения для отработки навыков использования сокращенного CSS-свойства `animation`. Этот тренажер поможет вам закрепить знания о порядке и синтаксисе указания различных параметров анимации (имя, длительность, функция времени, задержка, количество повторов, направление, режим заполнения) в одной строке. Задания построены по принципу 'от простого к сложному' и предполагают заполнение пропущенных частей CSS-кода для достижения определенного визуального эффекта. Теория не предоставляется, упор сделан на практику.

Список тем

Простейшая анимация: Имя и длительность

Заставьте квадрат двигаться по горизонтали вправо и обратно. Анимация уже определена с помощью `@keyframes move`. Вам нужно применить эту анимацию к элементу `#box1`, указав её имя и длительность в 2 секунды с помощью сокращенного свойства `animation`.

CSS

@keyframes move {
  0% { transform: translateX(0); }
  50% { transform: translateX(100px); }
  100% { transform: translateX(0); }
}

#box1 {
  width: 50px;
  height: 50px;
  background-color: dodgerblue;
  position: relative;
  /* Примените анимацию 'move' длительностью 2 секунды */
  animation: input1 2s;
}

                     @keyframes move {
  0% { transform: translateX(0); }
  50% { transform: translateX(100px); }
  100% { transform: translateX(0); }
}

#box1 {
  width: 50px;
  height: 50px;
  background-color: dodgerblue;
  position: relative;
  /* Примените анимацию 'move' длительностью 2 секунды */
  animation: input1 2s;
}

HTML

<div id="box1"></div>

Используйте сокращенное свойство `animation`. Первым значением укажите имя анимации (`move`), а вторым — её длительность (`2s`).

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

Результат

Сообщения

Выполнить

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

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

Добавляем временную функцию

Теперь изменим характер движения квадрата из предыдущего задания. Сделайте так, чтобы анимация `move` выполнялась с временной функцией `ease-in-out` (плавное начало и конец). Длительность остается 2 секунды. Допишите необходимое значение в свойство `animation`.

CSS

@keyframes move {
  0% { transform: translateX(0); }
  50% { transform: translateX(100px); }
  100% { transform: translateX(0); }
}

#box2 {
  width: 50px;
  height: 50px;
  background-color: tomato;
  position: relative;
  /* Анимация 'move', 2 секунды, функция времени ease-in-out */
  animation: move 2s input1;
}

                     @keyframes move {
  0% { transform: translateX(0); }
  50% { transform: translateX(100px); }
  100% { transform: translateX(0); }
}

#box2 {
  width: 50px;
  height: 50px;
  background-color: tomato;
  position: relative;
  /* Анимация 'move', 2 секунды, функция времени ease-in-out */
  animation: move 2s input1;
}

HTML

<div id="box2"></div>

В сокращенном свойстве `animation` после длительности добавьте значение временной функции. В данном случае это `ease-in-out`.

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

Результат

Сообщения

Выполнить

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

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

Бесконечное повторение

Заставьте квадрат пульсировать (увеличиваться и уменьшаться) бесконечно. Анимация `pulse` уже создана. Примените её к элементу `#box3` с длительностью 1.5 секунды, временной функцией `ease` и бесконечным количеством повторений.

CSS

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

#box3 {
  width: 50px;
  height: 50px;
  background-color: mediumseagreen;
  margin: 20px;
  /* Анимация 'pulse', 1.5с, ease, бесконечно */
  animation: pulse 1.5s ease input1;
}

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

#box3 {
  width: 50px;
  height: 50px;
  background-color: mediumseagreen;
  margin: 20px;
  /* Анимация 'pulse', 1.5с, ease, бесконечно */
  animation: pulse 1.5s ease input1;
}

HTML

<div id="box3"></div>

В свойстве `animation` после временной функции добавьте значение `infinite`, чтобы анимация повторялась бесконечно.

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

Результат

Сообщения

Выполнить

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

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

Задержка перед стартом

Примените к кругу `#circle1` анимацию вращения `spin`. Анимация должна длиться 3 секунды, выполняться линейно (`linear`), повторяться бесконечно и начинаться с задержкой в 1 секунду.

CSS

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

#circle1 {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 5px solid orange;
  margin: 20px;
  /* Анимация 'spin', 3с, linear, бесконечно, задержка 1с */
  animation: spin 3s linear infinite input1;
}

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

#circle1 {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 5px solid orange;
  margin: 20px;
  /* Анимация 'spin', 3с, linear, бесконечно, задержка 1с */
  animation: spin 3s linear infinite input1;
}

HTML

<div id="circle1"></div>

В сокращенном свойстве `animation` после количества повторений (`infinite`) укажите значение задержки. В данном случае это `1s`.

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

Результат

Сообщения

Выполнить

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

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

Направление анимации

Заставьте иконку двигаться вверх и вниз. Анимация `float` уже готова. Примените её к элементу `#icon1` с длительностью 4 секунды, бесконечным повторением и направлением `alternate`, чтобы она плавно двигалась туда-обратно.

CSS

@keyframes float {
  0% { transform: translateY(0); }
  100% { transform: translateY(-20px); }
}

#icon1 {
  width: 40px;
  height: 40px;
  margin: 30px;
  /* Анимация 'float', 4с, бесконечно, направление alternate */
  animation: float 4s infinite input1;
}

                     @keyframes float {
  0% { transform: translateY(0); }
  100% { transform: translateY(-20px); }
}

#icon1 {
  width: 40px;
  height: 40px;
  margin: 30px;
  /* Анимация 'float', 4с, бесконечно, направление alternate */
  animation: float 4s infinite input1;
}

HTML

<img id="icon1" src="https://naytikurs.ru/img/7.png" alt="icon">

В свойстве `animation` после количества повторений (`infinite`) добавьте значение направления `alternate`.

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

Результат

Сообщения

Выполнить

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

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

Режим заполнения: forwards

Сделайте так, чтобы после одного проигрывания анимации `slide-in` (длительностью 1 секунда), элемент `#box4` оставался в конечном состоянии (сдвинутым вправо). Используйте режим заполнения `forwards`.

CSS

@keyframes slide-in {
  from { transform: translateX(-100px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

#box4 {
  width: 80px;
  height: 40px;
  background-color: rebeccapurple;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0; /* Начальное состояние скрыто */
  /* Анимация 'slide-in', 1с, режим forwards */
  animation: slide-in 1s input1;
}

                     @keyframes slide-in {
  from { transform: translateX(-100px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

#box4 {
  width: 80px;
  height: 40px;
  background-color: rebeccapurple;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0; /* Начальное состояние скрыто */
  /* Анимация 'slide-in', 1с, режим forwards */
  animation: slide-in 1s input1;
}

HTML

<div id="box4">Box</div>

В свойстве `animation` после всех остальных параметров (длительность, имя) добавьте значение режима заполнения `forwards`.

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

Результат

Сообщения

Выполнить

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

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

Комбинация нескольких параметров

Примените к элементу `#box5` анимацию `change-color`. Она должна длиться 5 секунд, использовать временную функцию `linear`, повторяться 3 раза и проигрываться в обратном направлении (`reverse`). Заполните все пропуски в свойстве `animation`.

CSS

@keyframes change-color {
  0% { background-color: gold; }
  50% { background-color: cyan; }
  100% { background-color: hotpink; }
}

#box5 {
  width: 70px;
  height: 70px;
  margin: 15px;
  /* Анимация 'change-color', 5с, linear, 3 раза, reverse */
  animation: input1 5s input2 input3 input4;
}

                     @keyframes change-color {
  0% { background-color: gold; }
  50% { background-color: cyan; }
  100% { background-color: hotpink; }
}

#box5 {
  width: 70px;
  height: 70px;
  margin: 15px;
  /* Анимация 'change-color', 5с, linear, 3 раза, reverse */
  animation: input1 5s input2 input3 input4;
}

HTML

<div id="box5"></div>

В свойстве `animation` укажите по порядку: имя (`change-color`), длительность (`5s`), временную функцию (`linear`), количество повторов (`3`) и направление (`reverse`).

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

Результат

Сообщения

Выполнить

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

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

Анимация изображения: Появление и пульсация

Заставьте изображение `#img1` сначала плавно появиться (анимация `fade-in`, 1 секунда, режим `forwards`), а затем, с задержкой в 1 секунду после появления, начать бесконечно пульсировать (анимация `pulse`, 2 секунды, `ease-in-out`, `alternate`). Используйте сокращенную запись для обеих анимаций, перечислив их через запятую.

CSS

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

#img1 {
  display: block;
  width: 80px;
  height: 80px;
  margin: 20px auto;
  opacity: 0; /* Начальное состояние */
  /* 1: fade-in, 1с, forwards */
  /* 2: pulse, 2с, ease-in-out, задержка 1с, бесконечно, alternate */
  animation: input1 1s forwards, 
             input2 2s ease-in-out 1s input3 input4;
}

                     @keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

#img1 {
  display: block;
  width: 80px;
  height: 80px;
  margin: 20px auto;
  opacity: 0; /* Начальное состояние */
  /* 1: fade-in, 1с, forwards */
  /* 2: pulse, 2с, ease-in-out, задержка 1с, бесконечно, alternate */
  animation: input1 1s forwards, 
             input2 2s ease-in-out 1s input3 input4;
}

HTML

<img id="img1" src="https://naytikurs.ru/img/8.png" alt="Image">

В свойстве `animation` можно перечислить несколько анимаций через запятую. Первая анимация: `fade-in 1s forwards`. Вторая анимация должна начаться после первой, поэтому добавьте ей задержку `1s`. Вторая анимация: `pulse 2s ease-in-out 1s infinite alternate`.

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

Результат

Сообщения

Выполнить

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

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