[英]CSS3 animation transform rotate not working in Firefox
我在codepen.io中找到了这个动画。 一切正常,但是当我在Firefox中测试时,动画无法正常工作。
该代码已经具有浏览器前缀,所以我不知道什么在FF中不起作用。
<!DOCTYPE html>
<html>
<head>
<style>
.loading {
margin-left:auto;
margin-right:auto;
display:table;
border-width:30px;
border-radius:50%;
-webkit-animation:spin 1s linear infinite;
-moz-animation:spin 1s linear infinite;
-o-animation:spin 1s linear infinite;
animation:spin 1s linear infinite;
}
.style-1 {
border-style:solid;
border-color:#001e60 transparent
}
.style-2 {
border-style:double;
border-color:#001e60 transparent;
}
.style-3 {
border-style:double;
border-color:#001e60 #fff #fff;
}
@-webkit-keyframes spin {
100% {
-webkit-transform:rotate(359deg);
}
}
@-moz-keyframes spin {
100% {
-moz-transform:rotate(359deg);
}
}
@-o-keyframes spin {
100% {
-moz-transform:rotate(359deg);
}
}
@keyframes spin {
100% {
transform:rotate(359deg);
}
}
</style>
</head>
<body>
<div style="display: block;" class="loading-container">
<span id="loadingIndicator" class="loading style-3"></span>
</div>
</body>
</html>
问题是.loading
使用display: table;
而不实际指定宽度或高度。 使用这样的表来暗示大小有点麻烦。 Chrome浏览器对这些尺寸的解释与Firefox不同。 最好使用CSS明确为其指定大小。 尝试将其更改为具有如下宽度和高度的块:
.loading {
margin-left:auto;
margin-right:auto;
display:block;
border-width:30px;
border-radius:50%;
height: 5px;
width: 5px;
-webkit-animation:spin 1s linear infinite;
-moz-animation:spin 1s linear infinite;
-o-animation:spin 1s linear infinite;
animation:spin 1s linear infinite;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.