I was free today on the weekend, so I thought of trying Something new In the CSS. I got the idea from looking at the sprite of the pokemon, and it could be fun to put them in the motion using CSS. Here is how I did it.

Sprite Animation idea is to putting many images together in a single image and applying the CSS. To make it possible and combining all the images into the single frame, I used the photoshop to put up on the stack and combined it into a single image.

Here is how it looks

I wrote the basic HTML as short as possible my content which I was going to uses as a background animation

<div class="sprite"></div>

To Animate Using CSS, I used keyframes to define the animation for the user and give the primary position to see the animation. I used the background properties to insert my image in HTML. I fixed the position of the image at 0 0 and used the keyframe, which adjusts my position of the background when it goes from 0% to 100%.

Since the height of the image was 481px, and there are 8 images combined in the single image, which sums up to 3848px. Then I applied that animation in my .sprite class and using the animation-timing-function. The function allowed me to fix my step to switch the animation since, In my case, there were 8 images, Keep in mind that the no of images you increase in the single image the size increase as well. I wanted to run my animation in the loop So, I used the animation-iteration-count and set it to infinity and ran it for 2s which can be chosen as per the needs. Below is the code for the CSS that I used

.sprite {
    width:547px;
    height:481px;
    display:block;  
    background:white url(run.png) 0 0 no-repeat;
    margin:3rem auto;
    animation: run 2s steps(8) infinite;
    }
@keyframes run{
    0%{
        background-position: 0 0;

    }
    100%{
        background-position: 0 -3848px;
    }
}

As a result you will get a nice sprite animation which in my case was dog

Isn't that awesome way to play with CSS animation 😎😎

THANK YOU