Use CSS3 transitions with gradient backgrounds
P粉217629009
2023-08-23 21:25:42
<p>I'm trying to use css to make a transition on a thumbnail on mouseover so that the background fades in on hover. The conversion doesn't work, but if I just change it to <code>rgba()<!--code-->value, it works fine. Doesn't it support gradients? I've also tried using an image and it doesn't convert the image either. </code></p><code>
<p>I know this is possible because someone did it in another post, but I don't know exactly how. Any help> Here is some CSS that can be used: </p>
<pre class="brush:css;toolbar:false;">#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)))
}
</pre>
<p><br /></p></code>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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; }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).