CODEWITHSUNDEEP
htmlcssanimation
PlantTheIdea
PlantTheIdea

Reputation: 16359

CSS Transitions only working in Chrome

I have created a menu where when you hover over the link the title slides left out of the frame, and different words slide in (client request). I am trying to do this in CSS only, and it works exactly as expected in Chrome, but not in Firefox or Opera. Only the second animation (where the different words slide in) works, but the primary animation (where the normal word slides out) does not have its transition applied. Here is a jsFiddle with an example:

http://jsfiddle.net/3tUAN/

I can resort to using jQuery if I must (the code is there, already needed for IE9) but I would like to get this working for CSS-only if possible. I have considered trying to get more specific with selectors (using the child selector, something like a.MenuLink > li.MenuItem > span.MenuTitle) but I was hoping the community could help me on this one.

Upvotes: 4

Views: 358

Answers (1)

Marc Baumbach
Marc Baumbach

Reputation: 10473

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

span.MenuTitle {
    left: 0;
}

See this jsFiddle

Upvotes: 4

Related Questions