How to make smooth animations?

Good time of day. There are about 30 objects, we need to organize a animation of vertical movement.
Now do it using css3 like this:
.animate { top: 0px; animation: anline 12s; transition-timing-function: ease-out; }
@keyframes anline {
 0% { top: 0px; }
 100% { top: -3978px; }
}

The problem is that the animation is a bit slow sometimes most users, not everyone has smooth throughout the animation. I understand it costs the most animations on css.
How to achieve complete smoothness on all devices? Say, you need to look in the direction of canvas, it will be better to cope with this task? And if so, is it difficult to make a similar animation on it? Before with it never worked
June 8th 19 at 17:31
1 answer
June 8th 19 at 17:33
Solution
Instead of changing the properties of the top you need to change the property to translate. In this case, the animation will involve the video card and it will be much smoother.
Go to canvas in this case, no special meaning? - Chyna.Anderson commented on June 8th 19 at 17:36
it is difficult to answer not knowing the whole picture. - Craig.Lebsack79 commented on June 8th 19 at 17:39
and this time, I need to do on keyframe 100% randomly indented top, from -3978 to -4000, any input on how best to do this?
To dynamically change values is impossible, as I understand it, if only to generate a new animation js'ohms. - Chyna.Anderson commented on June 8th 19 at 17:42
only through the script in another way. - Craig.Lebsack79 commented on June 8th 19 at 17:45

Find more questions by tags JavaScriptCSSCanvas