Плавная анимация движения на CSS
Как происходит анимация движения? Это когда анимируемый объект на сайте меняет свое горизонтальное и вертикальное положение в заданное время. Скорость анимации напрямую зависит от того, какое расстояние проходит объект за такое-то время. Чем меньше установленное время, тем быстрее движется объект и наоборот – увеличение отведенного времени, замедляет движение.
Анимацию движения легко можно создавать только на CSS, не прибегая к JS. Как минимум есть два варианта, какие свойства применять для анимации:
- top, bottom, left, right
- transform: translate
Для примера создадим фигуру и заставим её двигаться вниз и вправо.
<div class="square"></div> // HTML
// 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 - задает бесконечное повторение
Пример анимации (вариант 1)
Как происходит анимация, когда мы используем top, bottom, right, left? Нам нужно сдвинуть фигуру на 200 пикселей вправо и вниз. Для этого пропишем для первого кадра исходные позиции элемента на странице. А для последнего кадра - положение элемента, где анимация должна закончиться.
@keyframes move {
0% {
top: 0;
left: 0;
}
100% {
top: 200px;
left: 200px;
}
}
Движение элемента между первым и последним кадром называется анимацией. Наш элемент будет сдвигаться на 1 пиксель в течении заданного времени. Браузер будет прорисовывать фигуру каждый раз заново на новой позиции, и так 200 раз туда и столько же обратно. Какие есть недостатки у этого способа анимации? Во первых нет плавности. Видно невооруженным глазом, как фигура дергается, словно спускается по ступенькам. Во вторых, это сильно нагружает браузер и на слабом компьютере анимация будет двигаться рывками.
Пример анимации (вариант 2)
При анимации с помощью трансформации, происходит более плавная анимация элемента (между пикселями). Прорисовка элемента происходит не на каждом пикселе, а по кадрам (в начальной и конечной точке). Это позволяет бережно использовать ресурсы браузера и не перегружает компьютер.
@keyframes move {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(200px, 200px, 0);
}
}
Итоги
Правильная CSS анимация движения должна создаваться при помощи трансформации (transform: translate). Так мы получим плавное движение объекта и не ухудшим скорость работы сайта.
-
Создано 04.03.2020 10:59:15
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.