CSS3關鍵幀無法在Chrome工作

Question

出於某種原因，下面的代碼無法在Chrome中工作，但在Firefox它：

p.subtitle{ 
    margin-top:9px; 
    font-size:15px; 
    font-family: 'din_mediumregular',Arial, Helvetica, sans-serif; 
} 

a:hover .option-wrapper p.subtitle{ 
    -webkit-animation: moveFromRight 600ms ease; 
    -moz-animation: moveFromRight 600ms ease; 
    -o-animation: moveFromRight 600ms ease; 
    animation: moveFromRight 600ms ease;   
} 


@-webkit-keyframes moveFromRight{ 
    from { 
     transform: translateX(100%); 
    } 
    to { 
     transform: translateX(0%); 
    } 
} 

@-moz-keyframes moveFromRight{ 
    from { 
     transform: translateX(100%); 
    } 
    to { 
     transform: translateX(0%); 
    } 
} 

@-o-keyframes moveFromRight{ 
    from { 
     transform: translateX(100%); 
    } 
    to { 
     transform: translateX(0%); 
    } 
} 

@keyframes moveFromRight{ 
    from { 
     transform: translateX(100%); 
    } 
    to { 
     transform: translateX(0%); 
    } 
} 

是不是有什麼毛病的代碼？正如你可以看到它包含-webkit-animation和@ -webkit-keyframes，所以我不確定。

Answer 1

應該

@-webkit-keyframes moveFromRight{ 
    from { 
     -webkit-transform: translateX(100%); 
    } 
    to { 
     -webkit-transform: translateX(0%); 
    } 
} 

Answer 2

有同樣的問題，但不增加迭代次數這是由於單獨

-webkit-animation-name: spin; 
-webkit-animation-duration: 4000ms; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-timing-function: linear; 

沒有工作：

-webkit-動畫： turning_ccw 4s無限;