Question

I’m learning about animations/transitions with CSS3, but in this code the transition don’t worked… why?

HTML:

<div id="test">
</div>

CSS:

#test {
    background-color: #333;
    background-image: -webkit-linear-gradient(top, #333, #666);
    width: 100px;
    height: 100px;
    -webkit-transition: background 1s linear;
}

#test:hover {
    background-image: -webkit-linear-gradient(top, #666, #999);
}

http://jsfiddle.net/LLRfN/

Answer 1

This works for me as it should intended. A couple things, this will only work in google chrome if you want it to work in other browsers:

Here is a generator

Here is an explanation

edit

Sorry I didn’t realize there was a transition property in there. After doing some googling and trying some stuff out on my own, it is pretty clear that transitions on background gradients isn’t possible… yet.

Here is a good article on how to get it to work with a little bit of a hack

http://nimbupani.com/some-css-transition-hacks.html