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

Question

[vetsmen]

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

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

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

Answer 1

[GreatRash]

Вместо изменения свойства top нужно менять свойство translate. В этом случае при анимации будет задействована видеокарта и она будет сильно плавнее.

Comments

[vetsmen]

Переходить на canvas в таком случае смысла особого нет?

[GreatRash]

vetsmen, сложно что-то ответить не понимая картины в целом.

[vetsmen]

GreatRash, и еще такой момент, мне нужно делать на кейфрейме 100% рандомный отступ top, от -3978 до -4000, любое входящее число, как лучше всего это сделать?
Динамически менять значения нельзя, как я понимаю, если только каждый раз не генерировать новую анимацию js'ом.

[GreatRash]

vetsmen, только через скрипт, по-другому никак.