Плавная анимация движения на CSS
Плавная анимация движения на CSS
Как происходит анимация движения? Это когда анимируемый объект на сайте меняет свое горизонтальное и вертикальное положение в заданное время. Скорость анимации напрямую зависит от того, какое расстояние проходит объект за такое-то время. Чем меньше установленное время, тем быстрее движется объект и наоборот – увеличение отведенного времени, замедляет движение.
Анимацию движения легко можно создавать только на CSS, не прибегая к JS. Как минимум есть два варианта, какие свойства применять для анимации:
- top, bottom, left, right
- transform: translate
Для примера создадим фигуру и заставим её двигаться вниз и вправо.
// CSS
.square <
width: 200px;
height: 200px;
border-radius: 10px;
background-color: #d42929;
position: absolute;
top: 0;
left: 0;
z-index: 1;
animation: move 3s linear alternate infinite;
>
Разберем последнюю строку в коде:
- move – название анимации, должно совпадать с @keyframes
- 3s – длительность анимации
- linear – линейное движение (по линии)
- alternate – воспроизводит анимацию в обратном порядке
- infinite – задает бесконечное повторение
