I am trying to create an animated button using a sprite sheet. The animation should play on hover and then on mouseout the animation should finish and then stop.
How can I go about doing this? I have tried setting the background of a div and controlling the background position through hover events. I can get the background position to set itself properly but each change goes so fast it might as well be instant and so the animation does not show itself.
Any suggestions would be helpful. After a lot of searching with no luck I am not sure what else to try.
Thank You!
the best advice would be to use a CSS3.
pretty easy no need for javascript:
take a look at this for example:
http://codeitdown.com/css-sprite-animations/
example here:
http://jsfiddle.net/drukaman/ued7mLha/1/
from the Referance : https://medium.com/@Mrugraj/sprite-sheet-animation-using-html-css-9091bebd4eeb
HTML
<html>
<head>
<title>
Sprite-Sheet Animation
</title>
<link rel=”stylesheet” type=”text/css” href=”main.css”>
</head>
<body>
<div class=”animatedDiv”></div>
</body>
</html>
CSS
.animatedDiv {
width: 820px;
height: 312px;
background-image: url("https://cf.dropboxstatic.com/static/images/index/animation-strips/hero-intro-bg-vflR5rUow.jpg");
-webkit-animation: play 2s steps(48) infinite;
-moz-animation: play 2s steps(48) infinite;
-ms-animation: play 2s steps(48) infinite;
-o-animation: play 2s steps(48) infinite;
animation: play 2s steps(48) infinite;
}
@-webkit-keyframes play {
from {
background-position: 0px;
}
to {
background-position: -39360px;
}
}
@-moz-keyframes play {
from {
background-position: 0px;
}
to {
background-position: -39360px;
}
}
@-ms-keyframes play {
from {
background-position: 0px;
}
to {
background-position: -39360px;
}
}
@-o-keyframes play {
from {
background-position: 0px;
}
to {
background-position: -39360px;
}
}
@keyframes play {
from {
background-position: 0px;
}
to {
background-position: -39360px;
}
}
for Detailed explanation follow the link.
