Css Transition Only Working In Firefox

I'm trying to use CSS transitions to make a background image fade in on my menu when you hover over it. I want it to take about 2 seconds to fade it. It works perfectly in Firefox

Solution 1:

As @Tyriar states, support for transitions/animations on generated content is patchy. It works for me in the latest Chrome Canary (Version 27.0.1444.3), so very soon it will be on the regular channel. When that lands, this will be supported in IE10, Firefox 4+ and Chrome. There's the notable exception of Safari (and Opera, but with the move to WebKit that might change).

The most robust solution for now will be to avoid trying to transition the :after content and instead apply it to one of your existing elements. That will get you pretty good browser support at 68%.

Here's a fork of your original example. Rather than using generated content, I've simplified the CSS to this:

.mainmenuli {
    position: relative;
    display: inline-block;
    height: 86px;
    margin: 0;
    padding: 0;
    background: url(http://placekitten.com/g/100/100) no-repeat center bottom;
}

.mainmenulia {
    position: relative;
    display: block;
    height: 100%;
    background: #fff;
    transition: all 1.5s ease-in-out;
}

.mainmenulia:hover {
    background: transparent;
}

Here, the transition is on the a itself, fading that from white to transparent to achieve the same effect.

Solution 2:

As mentioned, CSS transitions on :psuedo elements doesn't have the greatest support. http://css-tricks.com/transitions-and-animations-on-css-generated-content/

With straight html/css you can do this, but you'll need to slap in an additional element, here's a quick fiddle : http://jsfiddle.net/9uwVb/