# Sprite Sheet Animations Using Only CSS | kirupa.com

**URL:** <https://forum.kirupa.com/t/sprite-sheet-animations-using-only-css-kirupa-com/633169>\
**Category:** programming\
**Created:** [May 9, 2015, 4:04am UTC](https://forum.kirupa.com/t/sprite-sheet-animations-using-only-css-kirupa-com/633169 "2015-05-09T04:04:02Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [May 9, 2015, 4:04am UTC](https://forum.kirupa.com/t/sprite-sheet-animations-using-only-css-kirupa-com/633169/1 "2015-05-09T04:04:02Z")

</div>

by [kirupa](http://www.kirupa.com/me/index.htm) | 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](http://www.kirupa.com/html5/sprite_sheet_animations_using_only_css.htm)

---

<div class="post-metadata">

**Author:** ![pitaman](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/pitaman/32/7359_2.png) [@pitaman](https://forum.kirupa.com/u/pitaman)\
**Post date:** [August 28, 2015, 8:01pm UTC](https://forum.kirupa.com/t/sprite-sheet-animations-using-only-css-kirupa-com/633169/2 "2015-08-28T20:01:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [August 28, 2015, 8:23pm UTC](https://forum.kirupa.com/t/sprite-sheet-animations-using-only-css-kirupa-com/633169/3 "2015-08-28T20:23:01Z")

</div>

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 😛

---

<div class="post-metadata">

**Author:** ![pitaman](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/pitaman/32/7359_2.png) [@pitaman](https://forum.kirupa.com/u/pitaman)\
**Post date:** [August 31, 2015, 8:18pm UTC](https://forum.kirupa.com/t/sprite-sheet-animations-using-only-css-kirupa-com/633169/4 "2015-08-31T20:18:14Z")

</div>

Thank you good sir!

(High Five)

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [August 31, 2015, 8:28pm UTC](https://forum.kirupa.com/t/sprite-sheet-animations-using-only-css-kirupa-com/633169/5 "2015-08-31T20:28:33Z")

</div>

[http://chatabout.com/assets/images/questions/2014/07/53c0790b40514.jpg](http://chatabout.com/assets/images/questions/2014/07/53c0790b40514.jpg)

---

<div class="post-metadata">

**Author:** ![cordial](https://avatars.discourse-cdn.com/v4/letter/c/ecc23a/32.png) [@cordial](https://forum.kirupa.com/u/cordial)\
**Post date:** [December 6, 2019, 11:20am UTC](https://forum.kirupa.com/t/sprite-sheet-animations-using-only-css-kirupa-com/633169/6 "2019-12-06T11:20:42Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [December 6, 2019, 5:52pm UTC](https://forum.kirupa.com/t/sprite-sheet-animations-using-only-css-kirupa-com/633169/7 "2019-12-06T17:52:24Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![cordial](https://avatars.discourse-cdn.com/v4/letter/c/ecc23a/32.png) [@cordial](https://forum.kirupa.com/u/cordial)\
**Post date:** [December 13, 2019, 6:53pm UTC](https://forum.kirupa.com/t/sprite-sheet-animations-using-only-css-kirupa-com/633169/8 "2019-12-13T18:53:27Z")

</div>

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%;  
}