css - 带有@keyframes 的动画在 Chrome 中不起作用

Question

这个 css 似乎在 Firefox 中工作正常，但在 chrome 中却不行

.animate {
    animation: blink .5s step-end infinite alternate;
    -webkit-animation: blink .5s step-end infinite alternate;
}
@keyframes blink { 
   50% { border-color: red; background-color: rgba(255, 0, 0, 0.3);} 
}
-webkit-@keyframes blink { 
   50% { border-color: red; background-color: rgba(255, 0, 0, 0.3);} 
}

http://jsfiddle.net/18qtvfo0/

什么给了？

Answer 1

最终的问题是使用的选择器不正确——这是一个简单的打印错误，也赢得了接近的投票!

-webkit-@keyframes

应该是下面的，开头是@符号，

@-webkit-keyframes

原始 fiddle 也无法正确运行(任何地方)，因为 DIV 缺少“动画”类 - 这里是 corrected version适用于 Firefox 和 Chrome/WebKit。