Question

中有以下代码

适用于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);}
}

Answer 2

感谢您的回答。

我使用参数-moz并删除caracter＆＃34; - ＆＃34; - 动画

这是最终代码：

/ *********** HTML ********************* /

<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 {
    -moz-animation: spin-moz .7s infinite linear;
    -webkit-animation: spin-webkit .7s infinite linear;
    animation: spin .7s infinite linear;
}

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

@-webkit-keyframes spin-webkit {
    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 3

作为Niet，Dark Absol已经说过了，你必须在-animation之前移除破折号并且它会起作用。请参阅updated fiddle

CSS动画适用于Chrome，但不适用于FireFox

3 个答案: