As a newcomer, I am struggling to understand why this code isn't functioning correctly. My goal is to create the illusion of a flying bird.
This is my HTML:
<img src="http://dl.dropboxusercontent.com/u/105046436/tw.png" />
<br>
<div class="twitter-bird"></div>
This is 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; }
}
Here is a link to my JSFiddle: http://jsfiddle.net/6qHMG/
My objective is to alter the background image's position during hover.
However, what actually occurs is that the image's position remains static when hovered over.
UPDATE: Upon further examination, it appears that the background image's position does not transition as expected within the @keyframes fly. How should I properly set the background-position in the @keyframes fly?