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

Question

在这个 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 中的动画属性，即使它是渐变。

这是一种耻辱，但至少它显示出一种静态发光，所以我想这是一些东西。