Знакомимся как работают CSS @keyframes и свойства анимации

Чтобы анимировать элемент, нам необходимо познакомиться свойствами анимации и правилом @keyframes. Свойства анимации управляют поведением анимации, а правило @keyframes управляет тем, что происходит во время этой анимации. Всего имеется восемь свойств анимации. Текущая задача достаточно проста  и в первую очередь коснется двух наиболее важных свойств анимации:

• animation-name устанавливает имя анимации, которое позже используется @keyframes, чтобы сообщить CSS, какие правила соответствуют каким анимациям.
• animation-duration устанавливает продолжительность анимации.

@keyframes - помогает указать, что происходит в анимации во время воспроизведения анимации. Это делается путем задания свойств CSS для определенных «кадров» во время анимации с процентным соотношением от 0% до 100%. Если сравнить это с фильмом, свойства CSS для 0% - это то, как элемент отображается в начальной сцене. Свойства CSS для 100% - это то, как элемент появляется в конце, прямо перед  окончанием анимации.  CSS применяет магию для перехода элемента в течение заданного времени, чтобы разыграть сцену. Вот пример, иллюстрирующий использование @keyframes и свойств анимации:

#anim {
  animation-name: colorful;
  animation-duration: 3s;
}

@keyframes colorful {
  0% {
    background-color: blue;
  }
  100% {
    background-color: yellow;
  }
}

Для элемента с идентификатором anim в приведенном выше фрагменте кода для параметра animation-name установлено значение colorful и установлено значение animation-duration равное 3 секундам. Затем правило @keyframes ссылается на свойства анимации с именем colorful. Он устанавливает синий цвет в начале анимации (0%), который переходит в желтый к концу анимации (100%). Вы не ограничены только переходами от начала к концу, вы можете установить свойства элемента для любого процента от 0% до 100%.

Задание:

Необходимо анимировать элемент с идентификатором rect. Для этого:

1. Элемент с идентификатором rect должен иметь свойство animation-name со значением rainbow
2. Элемент с идентификатором rect должен иметь свойство animation-duration со значением 4s (4 секунды).
3. Правило @keyframes должно использовать имя анимации rainbow.
4.  Правило @keyframes  rainbow должно использовать background-color со значением синий(blue)  при 0%.
5. Правило @keyframes  rainbow должно использовать background-color со значением зеленый(green)  при 50%.
6. Правило @keyframes  rainbow должно использовать background-color со значением желтый(yellow)  при 100%.