Step 1: An SVG is created with pre-rendered frames in a film-strip manner. The viewport is simulated below by the solid charcoal border. The "animation window" is simulated below by the dashed red border.
Step 2: The SVG is translated using CSS transforms with a step-function equal to the number of frames in the film-strip.
Step 3: The viewing window where the animation is seen has CSS overflow:hidden set on it to hide the other frames. The viewing window must have height and width equivalent to the size of a frame of the animation.
This shows the above animation at the desired animation-duration.