CSS3 ключевые кадры не работает в хроме

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-анимация: turn_ccw 4s бесконечно;