html – CSS动画适用于Chrome,但不适用于FireFox

概述我在 http://jsfiddle.net/4LPSD/中有以下代码 它适用于Chrome(版本35.0.1916.153),但不适用于Firefox(版本30.0). /******** HTM **********************/<div class="container"> <h3>Animated button</h3> <button class="bt 我在 http://jsfiddle.net/4LPSD/中有以下代码

它适用于Chrome(版本35.0.1916.153),但不适用于firefox(版本30.0).

/******** htm **********************/<div >     <h3>Animated button</h3>     <button ><span ></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);}}

谁知道什么是错的？

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

解决方法 您需要包含Mozilla前缀,并在动画前删除连字符：

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

总结

以上是内存溢出为你收集整理的html – CSS动画适用于Chrome,但不适用于FireFox全部内容，希望文章能够帮你解决html – CSS动画适用于Chrome,但不适用于FireFox所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。