Why is my CSS :hover @keyframes animation not working?
13,734
here it is:
u have to add vendor prefixes
.twitter-bird {
height: 38px;
width: 37.5px;
background-image: url("http://dl.dropboxusercontent.com/u/105046436/tw.png");
}
.twitter-bird:hover {
-webkit-animation: fly .4s steps(3) infinite;
-moz-animation: fly .4s steps(3) infinite;
-ms-animation: fly .4s steps(3) infinite;
-o-animation: fly .4s steps(3) infinite;
animation: fly .4s steps(3) infinite;
}
@-webkit-keyframes fly {
from { background-position: 0px; }
to { background-position: -112.5px; }
}
@-moz-keyframes fly {
from { background-position: 0px; }
to { background-position: -112.5px; }
}
@-ms-keyframes fly {
from { background-position: 0px; }
to { background-position: -112.5px; }
}
@-o-keyframes fly {
from { background-position: 0px; }
to { background-position: -112.5px; }
}
@keyframes fly {
from { background-position: 0px; }
to { background-position: -112.5px; }
}
fiddle: http://jsfiddle.net/6qHMG/4/
Comments
-
sinhayash almost 2 years
I am a newbie. Why is this code not working? I want to make the bird fly.
My html:
<img src="http://dl.dropboxusercontent.com/u/105046436/tw.png" /> <br> <div class="twitter-bird"></div>
My CSS:
.twitter-bird { background-image: url(http://dl.dropboxusercontent.com/u/105046436/tw.png); display: inline-block; height: 38px; width: 37.5px; } .twitter-bird:hover { animation: fly 0.2s steps(3) 0 infinite; } @keyframes fly { from { background-position: 0 0; } to { background-position: -112.5px 0; } }
JSFiddle : http://jsfiddle.net/6qHMG/
What I want:
I want to change the background position of the image.
What happens:
Image position does not change on hover.
EDIT: I think the background image position does not change properly. The background-position doesn't seem to change. How do I set
background-position:
in@keyframes fly
? -
Farshid Saberi almost 10 yearsVendor prefix is required for chrome, safari and opera. ie and firefox, support standard keyword.