How to make animation smooth?

Question

css

Good day. There are about 30 objects, you need to organize the animation of movement vertically.
Now I'm doing it through css3 like this:

.animate { top: 0px; animation: anline 12s; transition-timing-function:  ease-out; }
@keyframes anline {
    0% { top: 0px; }
    100% { top: -3978px; }
}

The whole problem is that animations sometimes slow down for most users, not everyone has smoothness throughout the entire animation. As I understand it, these are the costs of the animation itself on css.
How to achieve full smoothness on all devices? They say you need to look towards canvas, will it be better at this task? And if so, is it difficult to make a similar animation on it? Never worked with him before.

Answer 1

Instead of changing the property top, you need to change the property translate. In this case, the video card will be involved in the animation and it will be much smoother.