CSS3旋转动画在chrome中不起作用

Question

CSS3：

.icon-refresh-animate {
    -webkit-animation: rotate 15s linear infinite alternate;
    -moz-animation: rotate 15s linear infinite alternate;
    -ms-animation: rotate 15s linear infinite alternate;
    -o-animation: rotate 15s linear infinite alternate;
}
@-webkit-keyframes rotate {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes "rotate" {
  from { transform: scale( 1 ) rotate( 0deg );   }
  to   { transform: scale( 1 ) rotate( 360deg ); }
}

HTML：

    <span class="btn btn-success active" data-restrict data-access="scouter recruiter admin" data-ng-if="!layout.syncProgress">
        <i class="icon-refresh icon-refresh-animate" > {{'REFRESHDATAPROGRESS' | translate}}</i>
    </span>

什么都不会做。

任何帮助都是非常感谢的。

Answer 1

对我来说，它在chrome上工作得很好，但在firefox上就不行了，我发现的原因是你错过了这一点：

@-moz-keyframes rotate {
  from { -moz-transform: scale( 1 ) rotate( 0deg );   }
  to   { -moz-transform: scale( 1 ) rotate( 360deg ); }
}