How to make frame-by-frame animation in HTML?

Question

JavaScript

There is a set of pictures.
Example:
1) person standing (basic)
2) person raising hand (frame from process)
3) person with hand raised
4) person raising leg (frame from process)
5) person with leg raised
The goal is:
A JavaScript function is called and animation takes place.
What options do I have:
1) html canvas
2) render in layers and transform: scale(0); transform:scale(1);
3) use GIF
Which option is the most cross-browser and optimal?

Answer 1

And what's with the canvas? Or do you write tags from the bulldozer? Cho then without 3D?

Answer 2

The second option is weird.
Gif in my opinion is the simplest, if there are few colors in the picture
Otherwise, do frame-by-frame animation using css animation

Answer 3

css sprites?