我一直在尝试使用css3动画在页面加载上旋转图标。该图标在Chrome和IE 9+中旋转,但它在firefox版本44上无效。我将非常感谢您的帮助。这是我的代码:
<div class="pageloading-mask"><div>
.pageloading-mask div {
background: none !important;
width: 20px;
height: 20px;
margin: 50px auto;
position: relative !important;
background: none !important;
}
.pageloading-mask div:before {
content: "LOADING..";
color: #038A3B;
position: absolute;
top: 350px !important;
transform: translateY(-50%) !important;
}
.pageloading-mask div:after {
content: "\e602";
font-family: AlbourneGlyph;
font-size: 80px;
position: absolute;
-webkit-animation: spin 2s infinite ease-in-out;
-moz-animation: spin 2s infinite ease-in-out;
animation: spin 2s infinite ease-in-out;
color: #038A3B;
top: 200px !important;
transform: translateY(-50%) !important;
}
@keyframes spin {
from { transform: scale(1) rotate(0deg); }
to { transform: scale(1) rotate(360deg); }
}
@-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
答案 0 :(得分:1)
只需删除此行transform: translateY(-50%) !important;
,它就会像这里一样工作:
.pageloading-mask div {
background: none !important;
width: 20px;
height: 20px;
margin: 50px auto;
position: relative !important;
background: none !important;
}
.pageloading-mask div:before {
content: "LOADING..";
color: #038A3B;
position: absolute;
top: 350px !important;
transform: translateY(-50%) !important;
}
.pageloading-mask div:after {
content: "\e602";
font-family: AlbourneGlyph;
font-size: 80px;
position: absolute;
-webkit-animation: spin 2s infinite 0s ease-in-out;
-moz-animation: spin 2s infinite 0s ease-in-out;
animation: spin 2s infinite 0s ease-in-out;
color: #038A3B;
top: 200px !important;
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
&#13;
<div class="pageloading-mask">
<div></div>
</div>
&#13;
答案 1 :(得分:0)
请参阅此处: jsfiddle
在您撰写-moz-keyframes
的{{1}}内,您需要使用-webkit-transform
并且不要在-moz-transform
!important
代码:
transform: translateY(-50%)
也。一定要正确编写HTML:
@-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
在mozzila firefox中测试过。让我知道它是否有效