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-滤镜 - ！这不动画）

(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屋！