CSS transitions only work in Chrome

Question

I created a menu in which, when you hover over a link, the heading slides go out of the frame and different words move (client request). I try to do this only in CSS, and it works exactly as expected in Chrome, but not in Firefox or Opera. Only the second animation (where different words glide) works, but the primary animation (where the normal word glides) has no transition applied. Here is a jsFiddle example with an example:

http://jsfiddle.net/3tUAN/

I can resort to using jQuery if I should (the code there is already needed for IE9), but I would like this to work only for CSS, if possible. I thought about trying to get more specific information about the selectors (using the child selector, something like a.MenuLink > li.MenuItem > span.MenuTitle ), but I was hoping the community would help me with this.

Answer 1

You need to specify the initial value for left for span.MenuTitle . This may be a bug in other browsers, but it is fixed in Firefox. Something like that:

 span.MenuTitle { left: 0; } 

See jsFiddle