CSS3 动画在 Chrome 和 Internet Explorer 中不起作用

Question

我使用动画来旋转 Logo 图像。它适用于 mozilla，但不适用于 chrome 和 ICE。

animation:2s linear 0s normal none infinite clock;
-webkit-animation:2s linear 0s normal none infinite clock;
-ms-animation:2s linear 0s normal none infinite clock;
-o-animation:2s linear 0s normal none infinite clock;
-moz-animation:2s linear 0s normal none infinite clock;

Answer 1

嗨亲爱的看到这个链接jsfiddle DEMO

CSS

.osc-tm-outer {
    background: #000;
    -webkit-border-radius: 2px 2px 0 0;
    -moz-border-radius: 2px 2px 0 0;
    -ms-border-radius: 2px 2px 0 0;
    border-radius: 2px 2px 0 0;
    color: #474747;
    height: 40px;
    line-height: 20px;
    overflow: hidden;
    padding:0;
    position: absolute;
    right: 0;
    text-align: center;
    text-indent: 80px;
    top: 0;
    width: 550px;


}
#osc-tm-end-preview{
    background: url("../images/osc-icon.png") no-repeat scroll 50% 5px #FFFFFF;
    height: 40px;
    width: 50px;
    transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    animation:2s linear 0s normal none infinite clock;
    -webkit-animation:2s linear 0s normal none infinite clock;
    -ms-animation:2s linear 0s normal none infinite clock;
    -o-animation:2s linear 0s normal none infinite clock;
    -moz-animation:2s linear 0s normal none infinite clock;
    position: absolute;
    left: 0;
    right: 0;
    text-indent: 110px;
}
@keyframes clock
                {
                from {left: 480px;} 
                to{left:20px;} 
                }
                @-moz-keyframes clock
                {
                from {left: 480px;} 
                to{left:20px;} 
                }
                @-webkit-keyframes clock
                {
                from {left: 480px;} 
                to{left:20px;} 
                }