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无限;