旋转齿轮动画在 Firefox 中不起作用答案

【问题标题】：Spinning gears animation not working in Firefox旋转齿轮动画在 Firefox 中不起作用
【发布时间】：2016-05-10 06:38:22
【问题描述】：

我不确定我错过了什么，但以下动画在 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); }
}

JSfiddle

谁能建议缺少哪个属性？

原始小提琴的致谢：Original Fiddle

【问题讨论】：

在强迫症方面，这些齿轮在现实中永远不会起作用。其中一个需要逆时针转动。
好眼睛..你是对的..我会努力解决这个问题的。

标签： css firefox css-transitions

【解决方案1】：

您没有丢失任何属性。您需要从 @keyframes bucketRoll 和 @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); }
}

【讨论】：