動畫與@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。