可以为 box-shadow CSS 属性设置动画吗？ Chrome 有动画，Firefox 没有答案

【问题标题】：Can box-shadow CSS property be animated? Chrome animates, Firefox does not可以为 box-shadow CSS 属性设置动画吗？ Chrome 有动画，Firefox 没有
【发布时间】：2013-06-07 04:46:53
【问题描述】：

以下是 jsfiddle.net 示例：

http://jsfiddle.net/PGa2H/

CSS

@keyframes blink {
    0% { box-shadow: 0 0 15px green; }
    50% { box-shadow: 0 0 0; }
    100% { box-shadow: 0 0 15px green; }
}

@-webkit-keyframes blink {
    0% { box-shadow: 0 0 15px green; }
    50% { box-shadow: 0 0 0; }
    100% { box-shadow: 0 0 15px green; }
}

.blink {
    -webkit-animation: blink 1.0s linear infinite;
    animation: blink 1.0s linear infinite;
}

盒形阴影动画在 Chrome 中工作
在 Firefox 中不起作用

问题

哪些 CSS3 属性可以设置动画？
这是在哪里指定的？
如果 Firefox 出现问题，是否有相关参考

【问题讨论】：

标签： css css-animations

【解决方案1】：

如果您出于某种原因使用无效的box-shadow 值，Firefox 似乎不喜欢它。如果你想取消阴影使用box-shadow: none。这似乎就是工作所需要的一切。

http://jsfiddle.net/PGa2H/2/

这似乎是一个非官方但准确的动画属性列表：http://oli.jp/2010/css-animatable-properties/

【讨论】：

完美！与边框混淆的盒子阴影（边框：0 似乎是合法的）。