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