Webkit 动画径向渐变？答案

【问题标题】：Webkit animate radial gradient?Webkit 动画径向渐变？
【发布时间】：2012-12-19 13:37:23
【问题描述】：

在this Fiddle 中，我试图在我的容器元素中获得“发光”效果。

#box {
  width: 100px;
  height: 100px;
  margin: 10px;
  animation: glow 2s ease-in-out infinite alternate;
  -webkit-animation: glow 2s ease-in-out infinite alternate;
}
@keyframes glow {
  from {background-image:radial-gradient(circle farthest-side at center, rgba(255,0,0,0) 24px, rgba(255,0,0,1) 24px, rgba(255,0,0,0) 24px);}
  to {background-image:radial-gradient(circle farthest-side at center, rgba(255,0,0,0) 24px, rgba(255,0,0,1) 24px, rgba(255,0,0,0) 48px);}
}
@-webkit-keyframes glow {
  from {background-image:-webkit-radial-gradient(center,circle farthest-side, rgba(255,0,0,0) 24px, rgba(255,0,0,1) 24px, rgba(255,0,0,0) 24px);}
  to {background-image:-webkit-radial-gradient(center,circle farthest-side, rgba(255,0,0,0) 24px, rgba(255,0,0,1) 24px, rgba(255,0,0,0) 48px);}
}

它在 IE10 中工作，但由于某种原因在 Chrome 中它只是呈现“to”状态并且根本没有动画。 Webkit 中的渐变是否可以动画化？

【问题讨论】：

标签： css-animations css

【解决方案1】：

经过进一步检查，background-image 似乎不是 Webkit 中的动画属性，即使它是渐变。

这很遗憾，但至少它显示的是静态发光，所以我猜是这样。

【讨论】：