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 ); }
}

CSS3旋转动画不在chrome中工作

1 个答案: