CSS 带有渐变的 CSS3 动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5654510/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 animation with gradients
提问by albuvee
Is there really no way to animate a gradient-background with CSS?
真的没有办法用 CSS 为渐变背景设置动画吗？
something like:
就像是：
@-webkit-keyframes pulse {
0% {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(196,222,242)), color-stop(0.5, rgb(242,242,242)), color-stop(1, rgb(240,240,240)));
}
50% {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(222,252,255)), color-stop(0.5, rgb(242,242,242)), color-stop(1, rgb(240,240,240)));
}
100% {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(196,222,242)), color-stop(0.5, rgb(242,242,242)), color-stop(1, rgb(240,240,240)));
}
}
I know, for Safari 5.1+ and Chrome 10+ there is a new gradient-syntax, but for now, I have to stick with the old one for this project.
我知道，对于 Safari 5.1+ 和 Chrome 10+，有一种新的渐变语法，但就目前而言，对于这个项目，我必须坚持使用旧的。
回答by Michael Mullany
Transitions are not supported yet on webkit gradients. It's in the spec, but it doesn't work yet.
webkit 渐变尚不支持过渡。它在规范中，但它还不起作用。
(p.s. if you're doing color transitions only - you may want to check out -webkit-filters - which do animate!)
（ps，如果你只做颜色转换——你可能想看看 -webkit-filters——它做动画！）
Update: gradient transitions apparently do work in IE10+
更新：渐变过渡显然在 IE10+ 中有效
回答by Brian Ephraim
Put each gradient variation on it's own layer. Absolute position them. Give each it's own set of keyframes synchronized with each other. In those keyframes define opacity for each layer, at each keyframe, with 1 and 0 mixed around amongst keyframes.
将每个渐变变化放在它自己的图层上。绝对定位它们。给每个它自己的一组彼此同步的关键帧。在这些关键帧中，定义每个图层的不透明度，在每个关键帧处，关键帧之间混合 1 和 0。
Beware that the container's color will bleed through, so wrap the layers in a parent with a background of white.
请注意容器的颜色会渗出，因此将图层包裹在具有白色背景的父级中。
回答by azizarslan
I solved the problem via applicating :before attribution to the a tag.
我通过应用 :before 归因于 a 标签解决了这个问题。
Link: http://codepen.io/azizarslan/pen/xsoje
链接：http: //codepen.io/azizarslan/pen/xsoje
CSS:
CSS：
nav ul#menu li a {
display: block;
position: relative;
z-index: 1;
/* webkit gradient background */
background: -webkit-linear-gradient(top, rgb(204, 0, 51), rgb(153, 0, 0));
}
nav ul#menu li a:before {
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
z-index: -1;
opacity: 0;
/* webkit gradient background */
background: -webkit-linear-gradient(top, rgb(0, 156, 204), rgb(0, 111, 145));
/* webkit transition */
-webkit-transition: all 250ms linear;
/* before hack */
content: ".";
text-indent: -99999px;
}
nav ul#menu li a:hover:before {
opacity: 1;
}
回答by Shawson
You should check out css sandpaper- this lets you achieve animated gradients, but it's not a pure css solution. Css sandpaper takes care of cross-browser rendering of the gradient, and there's a piece of javascript which handles the animation.
您应该查看 css sandpaper - 这可以让您实现动画渐变，但它不是纯 css 解决方案。CSS 砂纸负责渐变的跨浏览器渲染，并且有一段 javascript 处理动画。
http://www.useragentman.com/blog/2010/04/05/cross-browser-animated-css-transforms-even-in-ie/
http://www.useragentman.com/blog/2010/04/05/cross-browser-animated-css-transforms-even-in-ie/
回答by mindfullsilence
@Brian instead of using new html elements, use sudo elements :before and :after. Position the main element as relative, then position the pseudo elements as absolute with 0 for top, left, right, and bottom.
@Brian 不使用新的 html 元素，而是使用 sudo 元素 :before 和 :after。将主要元素定位为相对元素，然后将伪元素定位为绝对元素，顶部、左侧、右侧和底部均设为 0。
HTML:
HTML：
<div></div>
CSS:
CSS：
div {
width: 200px;
height: 200px;
position: relative;
}
div::before, div::after {
display: block;
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
Add your keyframes and gradients to the div and the pseudo elements using opacity. Use z-index to control which is on-top of which.
使用不透明度将关键帧和渐变添加到 div 和伪元素。使用 z-index 来控制哪个在哪个上面。
回答by Angelo Wellens
if you are looking for a transition of your text from a solid color to a gradient. Just animate the rgba color of the text to reveal the background gradient applied on it.
如果您正在寻找文本从纯色到渐变的过渡。只需为文本的 rgba 颜色设置动画即可显示应用在其上的背景渐变。
CSS:
CSS：
.button {
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#fe046e), color-stop(100%,#a02ed4));
-webkit-background-clip: text;
color: rgba(255,255,255,1);
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.button:hover {
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#fe046e), color-stop(100%,#a02ed4));
-webkit-background-clip: text;
color: rgba(255,255,255,0);
}
