Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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 ?

share|improve this question
4  
Well, what does it do? Does it do nothing? Make an error? Crash your computer? Make flying monkeys fall from the sky? Give you free waffles? Please clarify. – Doorknob Jun 14 at 12:16
3  
Yes, please let us know if it gives you free waffles, if so, I'll most definitely attempt to recreate this "bug" – eidsonator Jun 14 at 12:19
1  
@sinhayash: Stack Overflow isn't a help site. It's a question and answer site. See stackoverflow.com/questions/how-to-ask – Paul D. Waite Jun 14 at 12:20
1  
Stack Overflow is not a free "fix my code for me please thanks" site. I and all of the other users here answer questions because we volunteer to, and if you don't show any effort to fix your problem then we won't either. – Doorknob Jun 14 at 12:21
1  
Again, we aren't free code fixing support people! Please read the link that Paul gave you. – Doorknob Jun 14 at 12:22
show 13 more comments

closed as too localized by Doorknob, Paul D. Waite, greedybuddha, Jaguar, skuntsel Jun 14 at 18:59

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.If this question can be reworded to fit the rules in the help center, please edit the question.

1 Answer

up vote 7 down vote accepted

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/

share|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.