Чтобы анимировать элемент, нам необходимо познакомиться свойствами анимации и правилом @keyframes. Свойства анимации управляют поведением анимации, а правило @keyframes управляет тем, что происходит во время этой анимации. Всего имеется восемь свойств анимации. Текущая задача достаточно проста и в первую очередь коснется двух наиболее важных свойств анимации:
@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. Для этого:
- Элемент с идентификатором rect должен иметь свойство animation-name со значением rainbow
- Элемент с идентификатором rect должен иметь свойство animation-duration со значением 4s (4 секунды).
- Правило @keyframes должно использовать имя анимации rainbow.
- Правило @keyframes rainbow должно использовать background-color со значением синий(blue) при 0%.
- Правило @keyframes rainbow должно использовать background-color со значением зеленый(green) при 50%.
- Правило @keyframes rainbow должно использовать background-color со значением желтый(yellow) при 100%.