Animation 带渐变的CSS3动画

真的没有办法用CSS设置渐变背景的动画吗

比如：

@-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+有一个新的渐变语法，但现在，我必须坚持这个项目的旧语法。

webkit渐变还不支持转换。它在规范中，但还不起作用

（请注意，如果您只进行颜色转换-您可能想查看-webkit过滤器-哪些可以制作动画！）

---

更新：渐变过渡显然在IE10+中起作用。

您应该查看css沙纸-这可以让您实现动画渐变，但它不是一个纯css解决方案。Css sandpaper负责渐变的跨浏览器渲染，还有一段javascript处理动画

---

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

请注意，容器的颜色会渗透进来，因此请将层包装在背景为白色的父层中

---

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

HTML:

---

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

我通过应用解决了这个问题：在归属到a标记之前

链接：

CSS:

nav ul#菜单li a{
显示：块；
位置：相对位置；
z指数：1；
/*webkit渐变背景*/
背景：-webkit线性梯度（顶部，rgb（204,0,51），rgb（153,0,0））；
}
导航菜单李a：之前{
宽度：100%；
身高：100%；
显示：块；
位置：绝对位置；
排名：0；
左：0；
z指数：-1；
不透明度：0；
/*webkit渐变背景*/
背景：-webkit线性梯度（顶部，rgb（0，156，204），rgb（0，111，145））；
/*webkit转换*/
-webkit过渡：所有250ms线性；
/*黑客攻击前*/
内容：“.”；
文本缩进：-9999px；
}
导航ul#菜单li a：悬停：之前{
不透明度：1；
}

如果要将文本从纯色过渡到渐变色。只需对文本的rgba颜色设置动画，以显示应用于其上的背景渐变

CSS:

---

你不能改变css或者什么…如果我在一个元素上运行这个动画（-webkit animation:pulse 1s infinite；）什么都不会发生，我认为它不适用于渐变，即使是新的syntaxI刚刚通过艰苦的方式学会了这一点！线性渐变上的变换不起作用是的，变换不起作用，但变换起作用，因此您至少可以对它们进行平移/旋转/倾斜，即它在新语法的规范中，而不是专有的

-webkit-gradient（）

crap.AFAIK任何地方都还不支持渐变过渡，即使是支持新语法的渐变过渡。顺便说一句，如果你愿意使用SVG，那么渐变过渡就是完美的，只要你使用的是最新的浏览器。看，这确实很聪明-但你只需要额外的元素来设计样式（对我来说是不可能的），在大多数情况下，这是不可能的，因为你依靠渐变作为一个元素的背景。但感谢这个创造性的解决方案——现在这似乎是唯一的动画制作方法之一——至少是“假”动画制作——梯度。这里的解决方案真的很聪明。很好的解决方法。我也在IE 10和11中使用了它。在IE9上有足够好的回退（没有平滑的过渡，但悬停仍然有效），但是如果IE8或更早的语句出现，早期版本可能需要兼容性回退。

<div></div>

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