Создание движения с использованием анимации CSS
Когда элементы имеют заданную position
, например fixed
или relative
, свойства смещения CSS right
, left
, top
и bottom
могут использоваться в правилах анимации для создания движения. Как показано в приведенном ниже примере, вы можете нажать элемент вниз, а затем вверх, установив top
свойство 50%
ключевого кадра на 50%
пикселей, но установив его на 0px для первого ( 0%
) и последнего ( 100%
) ключевого кадра.
@keyframes rainbow {
0% {
background-color: blue;
top: 0px;
}
50% {
фон-цвет: зеленый;
top: 50px;
}
100% {
background-color: желтый;
top: 0px;
}
}
Добавьте горизонтальное движение в анимацию div
. Используя свойство left
offset, добавьте правило @keyframes
так что радуга начинается с 0 пикселей на 0%
, перемещается до 25 пикселей с 50%
и заканчивается на -25 пикселей при 100%
. Не заменяйте top
свойство в редакторе - анимация должна иметь как вертикальное, так и горизонтальное движение.