带有渐变的 CSS3 动画 [英] CSS3 animation with gradients

问题描述

真的没有办法用 CSS 为渐变背景制作动画吗?

Is there really no way to animate a gradient-background with 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 渐变尚不支持过渡.它在规范中，但它还不起作用.

Transitions are not supported yet on webkit gradients. It's in the spec, but it doesn't work yet.

(p.s. 如果你只做颜色转换——你可能想看看 -webkit-filters——它做动画！)

(p.s. if you're doing color transitions only - you may want to check out -webkit-filters - which do animate!)

更新:渐变过渡显然在 IE10+ 中有效

Update: gradient transitions apparently do work in IE10+

这篇关于带有渐变的 CSS3 动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！