html - CSS 动画在 Chrome 中有效，但在 FireFox 中无效

Question

我在 http://jsfiddle.net/4LPSD/ 中有以下代码

它适用于 Chrome(版本 35.0.1916.153)，但不适用于 Firefox(版本 30.0)。

/******** HTM **********************/
<div class="container">
     <h3>Animated button</h3>
     <button class="btn btn-lg btn-warning"><span class="glyphicon glyphicon-refresh     glyphicon-refresh-animate"></span> Loading...</button>
</div>


/******* CSS **********************/
/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('http://getbootstrap.com/dist/css/bootstrap.css');

.glyphicon-refresh-animate {
    -animation: spin .7s infinite linear;
    -webkit-animation: spin2 .7s infinite linear;
}

@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg);}
    to { -webkit-transform: rotate(360deg);}
}

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

有人知道怎么回事吗？

我正在尝试旋转图片图标。

Answer 1

您需要包含 Mozilla 前缀，并删除 animation 之前的连字符:

.glyphicon-refresh-animate {
  animation: spin .7s infinite linear;
  -webkit-animation: spin2 .7s infinite linear;
  -moz-animation: spin2 .7s infinite linear;
}

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