css transition only working in Firefox

Question

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 but all on other browsers it just appears instantly. In IE it doesn't work at all but I'm not worried about that since I never expected it to work.

CSS LAYOUT

.mainmenu ul li{
    height: 86px;
    display: inline-block;
    margin: 0;
    padding: 0;
    z-index:1000;
    position: relative;
}
.mainmenu li:after{
    content: "";
    opacity: 0;
    -webkit-transition: opacity 1.5s;
    -moz-transition:    opacity 1.5s;
    -o-transition:      opacity 1.5s;
    -ms-transition:     opacity 1.5s;
    transition:         opacity 1.5s;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
}
.mainmenu li:hover:after{
        opacity: 1;
}

CSS APPEARANCE

.mainmenu li:after{
    background: url(../images/hover.png) no-repeat center bottom;
}

HTML

<div class="mainmenu"><ul><li><a href=''>Home</a></li><li><a href=''>About Us</a></li><li><a href=''>Contact Us</a></li><li><a href=''>Blog</a></li><li><a href=''>Gallery</a></li></ul></div>

Can anyone help? Apart from IE it does work it making the image appear but it would be nice to get the fade in working on Chrome, Safari and Opera. If I can get it working then, I might even be able to think about IE.

i dont know if this will help but when i do transitions like this for example `transition:all ease 0.4s;` that does not work in chrome for some reason even if i do `-webkit-transition:all ease 0.4s;` instead i have to do it like this `-webkit-transition:all 0.4s ease;` — iConnor, Mar 19 '13 at 12:25
According to CSS-tricks this was fixed in Chrome 1/3/13, however the test case doesn't seem to work for me on latest Chrome. I definitely wouldn't be comfortable supporting this functionality with such patchy support. http://css-tricks.com/transitions-and-animations-on-css-generated-content/ — Daniel Imms, Mar 19 '13 at 12:36

CherryFlavourPez · Accepted Answer · 2013-03-19T13:00:46.450

2

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:

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

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

.mainmenu li a:hover {
    background: transparent;
}

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

edited Mar 19 '13 at 13:00

answered Mar 19 '13 at 12:42

CherryFlavourPez

7,529
5
45
47

This looks good. I'll give that a try and let you know. Thanks for such a qucik reply. – Richard Young Mar 19 '13 at 16:09
Can that be achieved with a gradient background or a background image on top or the hover? – Richard Young Mar 19 '13 at 17:00
Not sure exactly what you're after, but you can't transition gradients (yet) - see [this question](http://stackoverflow.com/questions/6542212/use-css3-transitions-with-gradient-backgrounds). – CherryFlavourPez Mar 19 '13 at 17:11
That's the problem. The menu background is a graduated fill which means I can't fade that out properly. – Richard Young Mar 19 '13 at 17:31
You'll have to look at faking it in some way: [this fork](http://jsfiddle.net/cherryflavourpez/5sJTe/) shows one (admittedly crappy) example of how you can use `background-size` and `background-position` to approximate it. It's particularly hard with your example where the background is an image, but if you play around you can probably get close enough. – CherryFlavourPez Mar 20 '13 at 14:43

score 0 · Answer 2 · answered Mar 19 '13 at 12:48

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/

css transition only working in Firefox

2 Answers2

Linked