动画与@keyframes在Chrome

Question

工作这个CSS似乎在Firefox中正常工作，但不是在铬

.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 

原来的小提琴也将失败，因为DIV缺少“动画”级正常运行（任意位置） - 这里是一个corrected version，适用于Firefox和Chrome/WebKit。