1

I have a div with a gradient and I want to apply a transition when the ueser go over It, I have create a transition but with a gradient doesn't work, this is my css code with styles.less

#navigation li
{
    margin: 0;
    width:126px;
    height:40px;
    padding-left:0px;
    padding-right:0px;
    list-style:none;
    float:left;

    /* Mozilla: */
    background: -moz-linear-gradient(top, #c9c9c9, #7b7b7b);
    /* Chrome, Safari:*/
    background: -webkit-gradient(linear,
                left top, left bottom, from(#c9c9c9), to(#7b7b7b));
    /* MSIE */
    filter: progid:DXImageTransform.Microsoft.Gradient(
                StartColorStr='#c9c9c9', EndColorStr='#7b7b7b', GradientType=0);
    .transition_bg;
}

#navigation li:hover{

    background: -moz-linear-gradient(top, #696969, #404040);
    /* Chrome, Safari:*/
    background: -webkit-gradient(linear,
                left top, left bottom, from(#696969), to(#404040));
    /* MSIE */
    filter: progid:DXImageTransform.Microsoft.Gradient(
                StartColorStr='#696969', EndColorStr='#404040', GradientType=0);
}

.transition_bg{
    transition-property: background; /*standard*/
    transition-duration: 0.4s;

    -webkit-transition-property: background; /*Safari e Chrome */
    -webkit-transition-duration: 0.4s;

    -o-transition-property: background;      /*Opera*/
    -o-transition-duration: 0.4s;

    -moz-transition-property: background;    /*Firefox*/
    -moz-transition-duration: 0.4s; 
}

And this is my html

<div id="navigation">
            <ul>
                <li><a href="index.php" id="index_btn">HOME</a></li>
                <li><a href="#" id="">AZIENDA</a></li>
                <li><a href="#" id="">PRODOTTI</a></li>
                <li><a href="#" id="">PARTNER</a></li>
                <li><a href="#" id="">NEWS</a></li>
                <li><a href="#" id="">CONTATTI</a></li>
            </ul>
        </div>
  • I'm not sure if the browsers support gradient transitions yet? – Christoph Jul 10 '12 at 07:20
  • I'm not sure too but I have tried to do that –  Jul 10 '12 at 07:22
  • taking your **[code](http://jsfiddle.net/poikl/2fwyu/)** i'm pretty sure they dont support transitions yet, since everything else works fine. It's defined in the specs, but not implemented in the browsers atm. – Christoph Jul 10 '12 at 07:24
  • 1
    Christoph has a good point here. Doesn't seem to work in FF: http://jsfiddle.net/dNCMh/ – Damien Jul 10 '12 at 07:24
  • 1
    This might help? It's a blog post by impressive webs on how to animate CSS3 gradients. http://www.impressivewebs.com/animating-css3-gradients/ – Christofer Vilander Jul 15 '12 at 17:06
  • possible duplicate of [Use CSS3 transitions with gradient backgrounds](http://stackoverflow.com/questions/6542212/use-css3-transitions-with-gradient-backgrounds) – Bass Jobsen Oct 27 '14 at 19:15

0 Answers0