Создание движения с использованием анимации 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 свойство в редакторе - анимация должна иметь как вертикальное, так и горизонтальное движение.