How it's done?
Page layout is like this:
<div id="pic"><div id="_1"> Frame 1 content</div><div id="_2"> Frame 2 content</div><div id="_3"> Frame 3 content</div><div id="_4"> Frame 4 content</div> </div>
Each frame in its div with a number as id. Note that there is no space
between divs, to not introduce extra space.
Now the style (editable) follows:
Set appropriate container color and size to contain each frame.
Set style to mimic pre tag; it's simpler just to use pre
as frame container, instead of div, however, it's better to reset the style anyway,
in case it's changed in the upstream style.
Make each frame zero-sized, positioned at the upper left corner ot the viewport, and invisible by zeroing its opacity.
Here goes the animation: four steps, for four frames, only on one step a frame is opaque.
Assign the animation to all the divs. Instead of creating a separate animation for each frame, reusing the same, setting animation delay of each frame to be 1/4 of the animation duration more than the previous frame.
While the invention of javascript make it possible and popular using it to present ASCII art animations in browser (cf. here or here or here), many people dislike javascript and prefer keep it turned off. On the other hand, moderately modern CSS supports animations, so why not use it to animate ASCII art too?
It's rather simple. Create a container to serve as a viewport, draw several frames
of your animation, and style it so only one frame is visible at any moment. Unless your
animation is just a movement of a solid object, you probably want transition function to be stepwise,
not smooth. To present one frame on each step, you should choose a property that
can be animated, so eg. display or z-index won't do,
but you still have several choices.
You can make place your frames into single element ("a sheet")
and make it's position relative to the container element with overflow: hidden.
Then on each step you change top or left position (so it works like sprites).
Or you can place your frames outside the visible area, say, using position: absolute,
and then use transform: translate() to move a proper frame to viewport on a proper step.
(Using transform is preferable to changing of element's top etc,
as it doesn't affect box model, so is more effective).
Another effective metod is placing all frames into the same place in the viewport, on top of each other,
and making them transparent, then changing opacity from 0 to 1 at the step
when the frame should be visible. This is what I use here. You can see the code with unnessesary details
above; note that the style is editable, so you can edit it in-place and see the changes immediately.