What is the correct time to replace sprites for animation?

Question

JavaScript

Hello!
I downloaded the sprites, but the animation does not work, such as emoticons in the chat, the pictures turn out in pieces and even the acceleration of their change does not make this matter more realistic.
Can you please tell me how to set it correctly in js?
Or do you need more than 5 pictures for smoothness?

Answer 1

no need to cut into separate pictures.
css3 animation can have a fixed number of steps.
so output a one-frame block, give it your storyboard image as a background, animate the background position offset and set the number of steps to it equal to the number of frames.
like here: https://codepen.io/bsl-zcs/pen/lpaGv
and five frames is just a very short animation, a fifth of a second. looks pretty smooth at the right speed.