Trying to make a webkit transition work in moz... help?

1

Hi all,

After years in Flash, I’ve just started making the transition to HTML5 and CSS3. So, I’m basically learning how to animate in a completely different way and I’d love some help.

Basically, I’m animating the background of an element on hover. The code I have below works wonderfully in webkit browsers but not in Firefox. I haven’t even attempted this in IE.

Here’s what I’ve got:


nav ul .nav-about { left:0px;
    background: url(assets/navFlagAbout.png) no-repeat;
    background-position-y: -187px; 
    height:187px;
    width:110px;
    margin:0px;
    padding:0px;
    overflow:hidden;
    position: absolute;
    cursor: pointer;
    -webkit-transition: background-position .2s ease-in-out;
}
nav ul .nav-about:hover { left:0px; 
    background: url(assets/navFlagAbout.png) no-repeat;
    background-position-y: 0px;
    cursor: pointer;
    -webkit-transition: background-position .2s ease-in-out;
}

If anyone has any ideas on how this webkit transition can be translated to work in Moz, I’d really appreciate it!

thanks!