具有渐变的CSS3animation

是否真的没有办法用CSSanimation渐变背景？

就像是：

@-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))); } } 

我知道，Safari 5.1+和Chrome 10+有一个新的渐变语法，但现在，我必须坚持使用旧的这个项目。

Answer 1

Webkit渐变上还不支持转场。 这是在规范，但它不工作。

（ps，如果你只做颜色转换 – 你可能想看看-webkit-filters – 哪些做animation！）

更新：梯度转换显然在IE10 +中工作

Answer 2

将每个渐变变化放在它自己的图层上。 绝对定位他们。 给每个它自己的一组关键帧相互同步。 在这些关键帧中，为每个图层定义不透明度，每个关键帧在关键帧中以1和0混合。

注意，容器的颜色会渗透，所以将图层包装在背景为白色的父级中。

http://jsfiddle.net/jSsZn/

Answer 3

我通过应用程序解决了这个问题：在归因于标签之前。

链接： http : //codepen.io/azizarslan/pen/xsoje

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; } 

Answer 4

你应该检查出CSS砂纸 – 这可以让你实现animation渐变，但它不是一个纯粹的CSS解决scheme。 Css砂纸负责处理梯度的跨浏览器渲染，并且有一段JavaScript处理animation。

http://www.useragentman.com/blog/2010/04/05/cross-browser-animated-css-transforms-even-in-ie/

Answer 5

@Brian而不是使用新的html元素，使用sudo元素：before和：after。 将主要元素定位为相对位置，然后将伪元素置于绝对位置，顶部，左侧，右侧和底部为0。

HTML：

 <div></div> 

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; } 

使用不透明度将您的关键帧和渐变添加到div和伪元素。 使用z-index来控制哪个在哪个顶部。

Answer 6

如果您正在寻找文本从纯色到渐变的过渡。 只需animation文本的rgba颜色，以显示应用于其上的背景渐变。

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); }