这个动画http://jsfiddle.net/ts9AG/不适用于(最新版本的)Firefox。但在 Firefox 26 中有效。我不知道为什么它不起作用。它仅使用边框宽度和背景颜色。
.loader.pulse {
width: 40px;
height: 40px;
border: 20px solid red;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
animation: Loader 1.3s linear 0 infinite;
-moz-animation: Loader 1.3s linear 0 infinite;
-webkit-animation: Loader 1.3s linear 0 infinite;
-o-animation: Loader 1.3s linear 0 infinite;
}
@-webkit-keyframes Loader {
0% {
background: #ddd;
border: 20px solid red;
}
49.9% {
background: #ddd;
border: 0px solid red;
}
50% {
background: red;
border: 20px solid #ddd;
}
100%{
background: red;
border: 0px solid #ddd;
}
}
@-moz-keyframes Loader {
0% {
background: #ddd;
border: 20px solid red;
}
49.9% {
background: #ddd;
border: 0px solid red;
}
50% {
background: red;
border: 20px solid #ddd;
}
100%{
background: red;
border: 0px solid #ddd;
}
}
@keyframes Loader {
0% {
background: #ddd;
border: 20px solid red;
}
49.9% {
background: #ddd;
border: 0px solid red;
}
50% {
background: red;
border: 20px solid #ddd;
}
100%{
background: red;
border: 0px solid #ddd;
}
}
最佳答案
Firefox 26 似乎将 animation: Loader 1.3s linear 0 infinite
中的 0
解释为时间值,尽管它不应该这样做。如果您更改为 0s
,它应该可以工作。 http://jsfiddle.net/ts9AG/1/
-moz-animation: Loader 1.3s linear 0s infinite;
-webkit-animation: Loader 1.3s linear 0s infinite;
-o-animation: Loader 1.3s linear 0s infinite;
animation: Loader 1.3s linear 0s infinite;
关于css - 此动画 (css3) 不适用于 Firefox,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22656968/