一尘不染

带有渐变的CSS3动画

css

真的没有办法使用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+,有一个新的渐变语法,但是现在,对于该项目,我必须坚持使用旧的语法。


阅读 1138

收藏
2020-05-16

共1个答案

一尘不染

Webkit渐变尚不支持过渡。它已在规格中,但尚无法使用。

(ps,如果您仅执行颜色转换-您可能要签出-webkit-filters-可以进行动画处理!)

更新:渐变过渡显然可以在IE10 +中使用

2020-05-16