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

**URL:** <https://forum.kirupa.com/t/trying-to-make-a-webkit-transition-work-in-moz-help/327617>\
**Category:** Uncategorized\
**Created:** [March 14, 2012, 8:08pm UTC](https://forum.kirupa.com/t/trying-to-make-a-webkit-transition-work-in-moz-help/327617 "2012-03-14T20:08:47Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![azukizero](https://avatars.discourse-cdn.com/v4/letter/a/74df32/32.png) [@azukizero](https://forum.kirupa.com/u/azukizero)\
**Post date:** [March 14, 2012, 8:08pm UTC](https://forum.kirupa.com/t/trying-to-make-a-webkit-transition-work-in-moz-help/327617/1 "2012-03-14T20:08:47Z")

</div>

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:

```auto

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!