使用@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

原始小提琴也无法正常运行（任何地方），因为DIV缺少“animate”类 - 这是corrected version，可以在Firefox和Chrome / WebKit中使用。