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 be activated on click and some on hover. something similar to the animation found in this site : http://www.pixelwrapped.com/ the cat tail is reponsive as in when you scale the broswer it scales along with it as well.
this is the code that i am using to create the animation
.monster {
position: absolute;
width: 100px;
height: 100px;
margin: 2% auto;
background: url('img/le-cloud.png') left center;
overflow: auto;
display: block;
left: 20%;
top: 40%;
}
.monster:hover {
position: absolute;
width: 100px;
height: 100px;
margin: 2% auto;
background: url('img/le-cloud.png') left center;
animation: play .9s steps(18);
overflow: auto;
display: block;
left: 20%;
top: 40%;
}
i found this tutorial which uses percentages, that works for changing 1 frame not playing the entire 18 frames in this example , i have other animations composed of more than 30 sprites, i looked into spritely.js but it wasn't responsive.
Any ideas how can i solve this ?