See Youtube https://www.youtube.com/watch?

v=nQXGFit9ICI

Sprite sheet as above spritestrip-1536.png

Other ref https://www.codeandweb.com/texturepacker/tutorials/how-to-create-a-sprite-sheet

Typical css code in style.css

Body
{
Margin: 0;
Padding: 0;
}
.box
{
Position: absolute;
Top: 50%;
Left: 50%;
Transform: translate(-50%, -50%);
Width: calc(1536px / 6);
Height: 256px;
Background: url(spritestrip-1536.png);
Animation: animate 1s steps(6) infinite;
}
@keyframes animate
{
From
{
Background-position: 0;
}
to
{
Background-position: 1536px;
}
}
Sprite Sheets with Divi
Make Sprites is one of the following:
CSS Sprites https://css.spritegen.com/
Sprite Cow http://www.spritecow.com/
Spritecow does not make sprites, just allows selection of the areas inside the file/image
CSS Sprites Generator https://www.toptal.com/developers/css/sprite-generator/

Iconizr will make a css icon set from a bunch of svg files. https://iconizr.com/

Need the css “map” of the images inside the sprite, sprite cow can select parts of an image! Others
take a group of files.

EG background image map

.flags-canada, .flags-mexico, .flags-usa {
background-image: url('../images/flags.png');
background-repeat: no-repeat;
}

.flags-canada {
height: 128px;
background-position: -5px -5px;
}

.flags-usa {
height: 135px;
background-position: -5px -143px;
}

.flags-mexico {
height: 147px;
background-position: -5px -288px;
}