CSS3动画不能在铬或Safari浏览器上工作

我想要一个简单的css3动画工作。到目前为止，它在Firefox中运行良好，但在Chrome或Safari中无法运行。CSS3动画不能在铬或Safari浏览器上工作

我加了@-webkit-keyframes所以它应该适用于所有浏览器（可能不在IE中）。

这是我的CSS：

.myFace { 
     display: block; 
     width: 266px; 
     height: 266px; 
     background: url(http://cl.ly/image/443k292m2C24/face2x.png) no-repeat 0 0;} 
.myFace:hover { 
    animation: threesixty 1s; 
    -webkit-animation: threesixty 1s; /* Safari and Chrome */ 
} 
@keyframes threesixty { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
} 
@-webkit-keyframes threesixty { 
    0% {transform: rotate(0deg);} 
    100% {transform: rotate(360deg);} 
}

这就是我想要做的事 - http://jsfiddle.net/dansku/JTcxH/4/

来源

2013-05-30 Daniel Spillere Andrade

我相信这是因为你的关键帧里面，你使用transform:，这将为IE10，Firefox和Opera工作，但还没有获得相应的webkit - 特别是可用于Chrome和Safari的-webkit-transform。

@keyframes threesixty { 
    0% { 
    transform: rotate(0deg); 
    -webkit-rotate(0deg); 
    -ms-transform:rotate(0deg); 
    } 
    100% { 
    transform: rotate(360deg); 
    -webkit-rotate(360deg); 
    -ms-transform:rotate(360deg); 
    } 
} 
@-webkit-keyframes threesixty { 
    0% { 
    transform: rotate(0deg); 
    -webkit-rotate(0deg); 
    -ms-rotate(0deg); 
    } 
    100% { 
    transform: rotate(360deg); 
    -webkit-rotate(360deg); 
    -ms-rotate(360deg); 
    } 
}

你还应该包括-ms-前缀正如我上面显示，IE浏览器的版本的前10

来源

2013-05-30 22:45:14 lifetimes

谁的答案会赢？附：很好的答案。 – jmeas

@jmeas谢谢。那么，看到我的第一，我希望我的。但是，如果没有，我会克服它，不知何故：p – lifetimes

从MDN article on transforms：

WebKit浏览器（Chrome浏览器，Safari浏览器）仍然需要-webkit用于转换的前缀，而Firefox从第16版开始不。

此代码应该为你做的工作：

@keyframes threesixty { 
    0% { 
    transform: rotate(0deg); 
    -webkit-transform: rotate(0deg); 
    } 
    100% { 
    transform: rotate(360deg); 
    -webkit-transform: rotate(360deg); } 
    } 
@-webkit-keyframes threesixty { 
    0% { 
    transform: rotate(0deg); 
    -webkit-transform: rotate(0deg); 
    } 
    100% { 
    transform: rotate(360deg); 
    -webkit-transform: rotate(360deg); 
    } 
}

对于Opera和IE9 +支持，分别使用-o和-ms前缀。（IE10不需要前缀）

来源

2013-05-30 22:45:33 jmeas

这完成了这项工作！非常感谢你！！！ –

CSS3动画不能在铬或Safari浏览器上工作

回答

相关问题