css-animations - Webkit 动画径向渐变？

Question

在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 中是否支持动画？

Answer 1

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

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