Хаотичное движение элементов

[Perepelenok]

https://codepen.io/kotya_ra/pen/VwvMNVm

Здравствуйте! Написал код, двигающий хаотично каждые 2 секунды элементы, подтормаживает у знакомого, сам тестировал на маке, а на винде вроде тормозит, есть ли возможность оптимизировать?Спасибо.

[Nexus]

Я думаю подтормаживает у вашего знакомого из-за того, что у вас длительность анимации не зависит от дистанции, т.е. объект что 100 пикселей будет идти 1 секунду, что 10.

https://jsfiddle.net/NexusDeveloper/xy0nkue1/

[Malleys]

Perepelenok, оно скорей там не подтормаживает, а когда движется медленно, то перескакивает по пикселям. Не стоит анимировать свойство margin, если вам нужна точная анимация. Для гладкой и субпиксельной анимации используйте transform. Также не стоит использовать старую библиотеку jQuery, в которой на самом деле не поддерживается анимация. (Они там на ЦП просчитывают промежуточные кадры)

Для вашей задачи нужна аппаратно-ускоренная CSS-анимация. CSS-анимация на то и анимация, чтобы её использовать для анимации. Вот ваш пример, я заменил «хак» с margin на анимацию. https://codepen.io/Malleys/pen/YzyrmwX?editors=0010

Я думаю подтормаживает у вашего знакомого из-за того, что у вас длительность анимации не зависит от дистанции, т.е. объект что 100 пикселей будет идти 1 секунду, что 10.

А разве такой анимации не может быть? Конечно может! Просто надо анимировать субпиксельно... А то что вы сделали, оно тоже самое, только быстрей проскакивает по пикселям!