css - 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-animation:turning_ccw 4s 无限；