: How to create a responsive sprite sheet animation in css? i've been trying to do this for hours but so far i haven't made any progress. I have a site with a few animations in it, some will

@Yeniel278

Try using transform's scale and whatever break points you need. It's supported in IE9 and above but you can be emulated in IE < 9 using Microsoft's zoom property. Others are (not easily) possible using the MS Matrix filter.
@media (max-width:1024px){
.monster {
transform:scale(0.5);
}
}

Vote Up Vote Down

@Tiffany317

I figured out how to do it eventually! Just in case anyone still cares, Let me do some explaning just so you don't go through what I went throught:

<style>
div.sprite {
margin: 0 auto;
width: 40%;
/* Change this to what ever value you desire*/
height: 0;
padding-bottom: 40%;
background-image: url("le-cloud-copy.png");
/* Add the sprite sheet here, must be on a staright line*/
background-position: 0 0;
background-size: 1800%;
/* I have 18 sprites in the sheet thus it's 1800%, if it was 4 you'd use 400% and so on*/
display: block;
}
div.sprite:hover {
/* background-position: 500% 0;*/
animation: play .9s steps(18);
/* 18 steps to go over al the sprites i have, if you had 4 in the sprite the value would be 4 for example */
}
@keyframes play {
100% {
background-position: 1800% 0;
}
}
</style>


And the magic bit is here include this library and this should work.

<script src="js/prefixfree.min.js"></script>

Vote Up Vote Down