Узнайте, как работают CSS-файлы и анимация CSS
Чтобы анимировать элемент, вам нужно знать свойства анимации и правило @keyframes . Свойства анимации определяют, как должна себя вести анимация, и правило @keyframes контролирует, что происходит во время этой анимации. Всего имеется восемь свойств анимации. Эта задача будет держать ее простой и охватывать две самые важные из них: animation-name задает имя анимации, которое позже используется @keyframes чтобы сообщить CSS, какие правила идут с анимацией. animation-duration задает animation-duration анимации. @keyframes - это то, как точно указать, что происходит в анимации в течение продолжительности. Это делается путем предоставления свойств CSS для определенных «кадров» во время анимации с процентами от 0% до 100%. Если вы сравниваете это с фильмом, свойства CSS для 0% - это то, как элемент отображается в начальной сцене. Свойства CSS на 100% - это то, как элемент появляется в конце, прямо перед броском кредитов. Затем CSS применяет магию для перехода элемента за заданную продолжительность, чтобы вывести сцену. Вот пример, иллюстрирующий использование @keyframes и свойств анимации:
#anim {Для элемента с
анимация-имя: красочный;
продолжительность анимации: 3 с;
}
@keyframes colorful {
0% {
background-color: blue;
}
100% {
background-color: желтый;
}
}
anim идентификатором, фрагмент кода выше , задает animation-name , чтобы colorful и устанавливает animation-duration до 3 секунд. Затем правило @keyframes ссылается на свойства анимации с именем colorful . Он устанавливает цвет в синий цвет в начале анимации (0%), который к концу анимации перейдет в желтый цвет (100%). Вы не ограничены только начальными переходами, вы можете установить свойства для элемента для любого процента от 0% до 100%.Создайте анимацию для элемента с id rect , установив animation-name на радугу и animation-duration до 4 секунд. Затем объявите правило @keyframes и установите background-color в начале анимации ( 0% ) на синий, середина анимации ( 50% ) на зеленый, а конец анимации ( 100% ) на желтый.