Enhance gradient backgrounds with CSS3 transitions

Question

I'm trying to use css to make a transition on a thumbnail image so that the background fades in on hover. The conversion doesn't work, but if I just change it to the rgba() value, it works wonderful. Doesn't it support gradients? I've also tried using an image and it doesn't convert the image either.

I know this is possible because in another post someone did it, but I don't know exactly how. Any help> Here is some CSS that can be used:

#container div a {
  -webkit-transition: background 0.2s linear;
  -moz-transition: background 0.2s linear;
  -o-transition: background 0.2s linear;
  transition: background 0.2s linear;
  position: absolute;
  width: 200px;
  height: 150px;
  border: 1px #000 solid;
  margin: 30px;
  z-index: 2
}

#container div a:hover {
  background: -webkit-gradient(radial, 100 75, 100, 100 75, 0, from(rgba(0, 0, 0, .7)), to(rgba(0, 0, 0, .4)))
}

Answer 1

One solution is to transform the background position to create a gradient change effect: http://sapphion.com/2011/10/css3-Gradient transition and background position/

#DemoGradient{  
    background: -webkit-linear-gradient(#C7D3DC,#5B798E);  
    background: -moz-linear-gradient(#C7D3DC,#5B798E);  
    background: -o-linear-gradient(#C7D3DC,#5B798E);  
    background: linear-gradient(#C7D3DC,#5B798E);  
  
    -webkit-transition: background 1s ease-out;  
    -moz-transition: background 1s ease-out;  
    -o-transition: background 1s ease-out;  
    transition: background 1s ease-out;  
  
    background-size:1px 200px;  
    border-radius: 10px;  
    border: 1px solid #839DB0;  
    cursor:pointer;  
    width: 150px;  
    height: 100px;  
}  
#DemoGradient:Hover{  
    background-position:100px;  
}  

<div id="DemoGradient"></div>  

Answer 2

Gradients do not yet support transitions (although the current specification says they should support gradient-like to gradient-like transitions via interpolation.).

If you want a fade-in effect with a background gradient, you must set the opacity on the container element and "transition" the opacity.

(There are already some browser versions that support gradient transitions (e.g. IE10. I tested gradient transitions in IE in 2016 and they seemed to work at the time, but my test code no longer works.)

Updated: October 2018 Gradient transitions with new syntax without prefix [e.g. Radial-gradient(...)] are now confirmed to work (again?) on Microsoft Edge 17.17134. I don't know when this was added. Still not working on latest Firefox and Chrome / Windows 10.

Updated: December 2021 The @property workaround is now available in recent Chromium-based browsers (but does not work in Firefox). See (and vote for) @mahozad's answer below (or YMMV above).