[英]CSS3 Animation not working on Firefox But working on chrome
I am trying to make my animation work on firefox, Its working fine on google chrome but not in firefox or any other browser. 我正在尝试使我的动画在firefox上正常工作,但在google chrome上却可以正常工作,但在Firefox或任何其他浏览器上却无法正常工作。
Here is the html markup 这是html标记
<div id="blo"></div>
and CSS sheet 和CSS工作表
#blo {
width: 44px;
height: 43px;
background: url(http://www.noirextreme.com/digital/Earth-Color4096.jpg);border-radius: 50%;
background-size: 86px, 43px;
box-shadow: inset 5px 0 17px 0px rgb(5, 5, 5), inset -2px 1px 3px 1px rgba(255, 255, 255, 0.2);
-webkit-animation-name: rotate;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 4s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: rotate;
-ms-animation-duration: 4s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: rotate;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
z-index: 9999;
position: relative;
@-webkit-keyframes rotate {
from { background-position-x: 0px; }
to { background-position-x: 86px; }
}
@-ms-keyframes rotate {
from { background-position-x: 0px; }
to { background-position-x: 86px; }
}
@-moz-keyframes rotate {
from { background-position-x: 0px; }
to { background-position-x: 86px; }
}
Fiddle: http://jsfiddle.net/J22TN/1/ 小提琴: http : //jsfiddle.net/J22TN/1/
@keyframes rotate {
from { background-position-x: 0px; }
to { background-position-x: 86px; }
}
change @keyframes to this: 将@keyframes更改为此:
@keyframes rotate {
from { background-position: 0 0; } // changed position-x to position: 0 0
to { background-position: 86px 0; }
}
And also, remove all the -moz-
lines. 并且,删除所有
-moz-
行。 @keyframe animations
are directly supported by firefox
! firefox
直接支持@keyframe animations
!
Your Final CSS should be this: 您的最终CSS应该是这样的:
#blo {
width: 44px;
height: 43px;
background: url(http://www.noirextreme.com/digital/Earth-Color4096.jpg);border-radius: 50%;
background-size: 86px, 43px;
box-shadow: inset 5px 0 17px 0px rgb(5, 5, 5), inset -2px 1px 3px 1px rgba(255, 255, 255, 0.2);
-webkit-animation-name: rotate;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-name: rotate;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
z-index: 9999;
position: relative;
}
@-webkit-keyframes rotate {
from { background-position-x: 0px; }
to { background-position-x: 86px; }
}
@keyframes rotate {
from { background-position: 0 0; }
to { background-position: 86px 0; }
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.