问CSS3动画转换旋转不能在火狐中工作
EN

Stack Overflow用户

提问于 2015-11-05 03:42:55

回答 1查看 336关注 0票数 0

我在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>

css

css-transitions

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-11-05 04:46:39

问题是.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;
}

BIN：https://jsbin.com/nedanayopu/edit?html,output

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/33536328

复制

相似问题

问CSS3动画转换旋转不能在火狐中工作
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS3动画转换旋转不能在火狐中工作EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS3动画转换旋转不能在火狐中工作
EN