带渐变的 CSS3 动画颜色

Question

我正在使用 CSS3 动画将一个引导手风琴从一种颜色转换为其他颜色，但问题是我发现动画无法通过渐变进行过渡，而且手风琴对我来说似乎太多了 2D。 我读到人们做了一些技巧，比如将一个元素放在另一个元素上并使用不透明度，但在可能的情况下，将另一个元素设置在同一位置并不容易，因为它是动态创建的。

你能给我一些建议吗？

到目前为止，这是我尝试做的但没有成功：

.panel-warning > .panel-heading {
    background: linear-gradient(to bottom, #FCFCFC 0%, #FFF4C4 30%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    opacity: 0;
}

.panel-warning > .panel-heading {
    -webkit-animation-direction: alternate;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: alert-warning;
    -webkit-animation-timing-function: ease;
    -moz-animation-direction: alternate;
    -moz-animation-duration: 5s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-name: alert-warning;
    -moz-animation-timing-function: ease;
    opacity: 0.5;
}

Answer 1

虽然我同意其他人的观点，不清楚您究竟希望完成什么，但这里有一些简单的渐变动画演示代码：

.two:link, .two:visited {
  background: #2876b2;
  background: -webkit-linear-gradient(#2876b2, #549ad0);
  background: -moz-linear-gradient(#2876b2, #549ad0);
  background: -o-linear-gradient(#2876b2, #549ad0);
  background: linear-gradient(#2876b2, #549ad0);
  background-repeat: repeat;
  -webkit-background-size: 100% 200%;
  -moz-background-size: 100% 200%;
  background-size: 100% 200%;
  -webkit-transition: all .5s linear;
  -moz-transition: all .5s linear;
  -o-transition: all .5s linear;
  transition: all .5s linear;
}

.two:hover, .two:focus, .two:active {
  background-position: 0 -102%;
}

这适用于按钮，取自here。

如果您追求更复杂的东西，您可能需要一些复杂的 JavaScript 黑客技术。

Answer 2

我猜你想要一个 css3 渐变动画，所以如果你使用这个网站的搜索，你可以找到这个问题，其中包含你问题的可能解决方案：

css3-animation-with-gradients

我最喜欢的解决方案是 Brian 的 http://jsfiddle.net/jSsZn/ CSS3