Use CSS3 transitions with gradient backgrounds
I'm trying to transition on hover with css over a thumbnail so that on hover, the background gradient fades in. The transition isn't working, but if I simply change it to an rgba() value, it works fine. Are gradients not supported? I tried using an image too, it won't transition the image either.
I know it's possible, as in another post someone did it, but I can't figure out how exactly. Any help> Here's some CSS to work with:
#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)))
}
Gradients don't support transitions yet (although the current spec says they should support like gradient to like gradient transitions via interpolation.).
If you want a fade-in effect with a background gradient, you have to set an opacity on a container element and 'transition` the opacity.
(There have been some browser releases that supported transitions on gradients (eg IE10. I tested gradient transitions last year and they seemed to work at the time, but my test code no longer works - perhaps there was a glitch in the Matrix.)
One work-around is to transition the background position to give the effect that the gradient is changing: http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/
CSS3 gradient transition with background-position
Although you can't directly animate gradients using the CSS transition property, it is possible to animate the background-position property to achieve a simple gradient animation:
The code for this is dead simple:
#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>
A solution is to use background-position to mimic the gradient transition. This solution was used in Twitter Bootstrap a few months ago.
Update
http://codersblock.blogspot.fr/2013/12/gradient-animation-trick.html?showComment=1390287622614
Here is a quick example:
Link state
.btn {
font-family: "Helvetica Neue", Arial, sans-serif;
font-size: 12px;
font-weight: 300;
position: relative;
display: inline-block;
text-decoration: none;
color: #fff;
padding: 20px 40px;
background-image: -moz-linear-gradient(top, #50abdf, #1f78aa);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#50abdf), to(#1f78aa));
background-image: -webkit-linear-gradient(top, #50abdf, #1f78aa);
background-image: -o-linear-gradient(top, #50abdf, #1f78aa);
background-image: linear-gradient(to bottom, #50abdf, #1f78aa);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff50abdf', endColorstr='#ff1f78aa', GradientType=0);
background-repeat: repeat-y;
background-size: 100% 90px;
background-position: 0 -30px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
Hover state
.btn:hover {
background-position: 0 0;
}
链接地址: http://www.djcxy.com/p/27412.html
上一篇: 具有多个属性的CSS过渡速记?
下一篇: 使用具有渐变背景的CSS3转场