Как правильно по времени заменять спрайты для анимации?

Question

[Ingernirated]

Всем привет!
Скачал спрайты, но анимация не выходит, как например смайлики в чате, получается картинки кусками и даже ускорение их смены не делает это дело более реалистичным.
Подскажите пожалуйста, как правильно её задавать в js?
Или нужно более, чем 5 картинок для плавности?

Comments

[profesor08]

Размести на jsfiddle свои попытки. Эти пять картинок не сделаю тебе красивую и плавную анимацию.

Answer 1

[forspamonly2]

не надо ничего резать на отдельные картинки.

у css3 анимации можно указать фиксированное количество шагов.

так что выводите блок размером с один кадр, указывайте ему фоном вашу картинку с раскадровкой, делайте анимацию смещения позиции фона и задавайте ей количество шагов равное количеству кадров.

как тут: https://codepen.io/bsl-zcs/pen/lpaGv

а пять кадров - это просто очень короткая анимация, на пятую часть секунды. на должной скорости вполне плавно выглядит.

Comments

[Ingernirated]

спасибо!