Sprite Sheet Animations Using Only CSS | kirupa.com

programming
1

by kirupa | 9 May 2015

Sprite sheets can be used for more than just optimizing how you display static images. Hearkening back to the very first arcade games, your sprite sheets can also be used to contain a sequence of images that make up the individual frames of an animation. When these frames are played back rapidly, what you see is a moving picture.

This is a companion discussion topic for the original entry at http://www.kirupa.com/html5/sprite_sheet_animations_using_only_css.htm
2

Hi. Do sprite sheets used for css animation have to be one wide sprite with the same height? Instead of more of a typical sprite sheet like the ones used in games that’s more rectangular with sprites all over the sheet?

Thank you.

Carlos

3

Unfortunately, yes. The reason is that the step function only goes in one direction. Besides one really wide row, you can have one really tall column instead. You just can’t have a grid like you would in other scenarios.

If you are using sprite sheets in JavaScript, then you can more closely mimic what games to pretty easily.

Cheers,
Kirupa :stuck_out_tongue:

1 Like
4

Thank you good sir!

(High Five)

1 Like
5

http://chatabout.com/assets/images/questions/2014/07/53c0790b40514.jpg

6

Hi, this is very good, thanks. I have one slight issue and I’m not sure what is the best way to proceed. How do I make the animation responsive? Do i have one sprite per viewport supported (one for mobile, tablet, desktop for example) and then use media queries to adjust the fixed widths / heights? Or is there a better option where I can use just one sprite and adjust its size using relative values? I can’t really think how you could do that without breaking the animation though.

7

One sprite per viewport is the best and easiest way to do what you are trying to do.

When using a single sprite sheet, it gets really tricky trying to get the frame widths in-sync, but it is possible. I wouldn’t recommend it, though :slight_smile:

8

Thanks for your quick reply. I managed to make it responsive with a slightly different approach while using just one sprite image (using vertical sprites) -

HTML
div class=“animation-container hand-alien-container”>
div id=“hand-alien” class=“large-animation”></div
div

SCSS
.animation-container {
position: relative;
}

.animation-container:before {
content: “”;
display: block;
}

.large-animation {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}

.hand-alien-container:before {
padding-top: 56%;
}

.hand-alien-container {
width:30%;

@include media-breakpoint-up(md) {
width: 40%;
}

@include media-breakpoint-up(lg) {
width: 30%;
}
}

@keyframes banner-animation {
from { background-position: 0 0; }
to { background-position: 0 100%; }
}

#hand-alien {
animation: banner-animation 2s steps(41) infinite;
background: url(’…/images/hand-alien.png’) no-repeat 0 0%;
background-size: 100%;
}

1 Like