In the body, a div with the class box is created.

This div serves as the main container for the sprite animation.

Nested inside the box is another div with the class text

It contains an h2 heading displaying the text "Loading..." to indicate that the animation represents a loading effect.

The entire animation setup is completed using CSS.

The CSS code is where the animation is defined and controlled.

The body element is styled with a background image and the 'Poppins' font family for a clean, modern look. It centers the sprite animation box and positions it in the middle of the screen.

The .box class defines the main properties for the sprite animation.

The width and height of the .box are set based on the size of each frame in the sprite sheet.

The width is calculated as calc(2112px / 8), where 2112px is the total width of the sprite image and 8 is the number of frames in the image.

The background property sets the sprite image URL.

The image file (https://imgur.com/s9Xl0Sh.png) contains all frames of the animation in a single horizontal strip.

The animation property applies the animate keyframes, set to play indefinitely (infinite) in a single second (1s).

The @keyframes animate section defines the animation itself.

It changes the background-position from 0 (the start of the sprite) to 2112px (the end of the sprite).

The steps(8) function divides the animation into 8 equal steps, aligning each frame of the sprite with each step of the animation, creating a smooth transition across the frames.

The .text h2 style positions the "Loading..." text below the sprite animation.

It is set to a bright yellow color (#f5ff3d) for visibility.

The position: absolute; aligns it relative to the .box, while the top: 100%; and left: 35%; properties adjust its placement directly beneath the animation.

No Javascript Code