Как сделать плавность анимации?

Доброго времени суток. Есть около 30 объектов, нужно организовать анимацию движения по вертикали.
Сейчас делаю это через css3 примерно вот так:

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

Вся проблема в том, что анимация подтормаживают иногда у большинства пользователей, не у всех есть плавность на протяжении всей анимации. Я так понимаю, это издержки самой анимации на css.
Как добиться полной плавности на всех устройствах? Говорят, нужно смотреть в сторону canvas, он будет лучше справляться с данной задачей? И если да, то сложно ли сделать аналогичную анимацию на нем? До этого с ним никогда не работал