我不确定我错过了什么,但以下动画在 Safari 中有效,但在 Firefox 中无效。也不确定它是否在 IE 中工作。
HTML:
<div>
<i></i><i></i>
</div>
CSS:
body {
background: #000;
}
i {
display: block;
position: absolute;
width: 30px;
height: 30px;
top: 30px;
left: 30px;
background: url(http://i.imgur.com/lOBxb.png);
-webkit-animation: barrelRoll 2s infinite linear;
-moz-animation: barrelRoll 2s infinite linear;
-o-animation: barrelRoll 2s infinite linear;
animation: barrelRoll 2s infinite linear;
}
i:last-of-type {
top: 22px;
left: 56px;
-webkit-animation-name: invertBarrelRoll;
-moz-animation-name: invertBarrelRoll;
}
@-webkit-keyframes barrelRoll {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes barrelRoll{
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@-o-keyframes barrelRoll{
0% { -o-transform: rotate(0deg); }
100% { -o-transform: rotate(360deg); }
}
@keyframes barrelRoll{
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes invertBarrelRoll {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(-360deg); }
}
@-moz-keyframes invertBarrelRoll{
0% { -moz-transform: rotate(0deg); }
100% { -moz-transform: rotate(360deg); }
}
@-o-keyframes invertBarrelRoll{
0% { -o-transform: rotate(0deg); }
100% { -o-transform: rotate(360deg); }
}
@keyframes invertBarrelRoll{
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
谁能建议缺少哪个属性?
原始 fiddle 的致谢:Original Fiddle
最佳答案
您没有遗漏一个属性。您需要从 @keyframes barrelRoll 和 @keyframes invertBarrelRoll 中删除 -webkit- 前缀。
所以,这个:
@keyframes barrelRoll{
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
应该是:
@keyframes barrelRoll{
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
还有这个:
@keyframes invertBarrelRoll{
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
应该是:
@keyframes invertBarrelRoll{
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
关于css - 旋转齿轮动画在 Firefox 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35136842/