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 😎😎
Top comments (0)