带有渐变的CSS3动画

  • Z时代
  • 2024-01-10
  • 分类：问答

真的没有办法使用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渐变尚不支持过渡。它已在规格中，但尚无法使用。

（ps，如果您仅执行颜色转换-您可能要签出-webkit-filters-可以进行动画处理！）

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

以上是 带有渐变的CSS3动画 的全部内容， 来源链接： utcz.com/qa/433194.html

回到顶部