css - 此动画 (css3) 不适用于 Firefox

标签 css css-animations

这个动画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/

相关文章:

javascript - 使用 JQuery 附加带有样式的 div

css - 如何旋转 svg 组并保持其相对位置?

jquery - 如何在不知道父级高度的情况下垂直居中 div?

CSS3 - 动画延迟不起作用

css - Bootstrap 中心垂直和水平对齐

javascript - 设置生效前的预览

css - 如何将 less 从 "display: block"动画到 "display: none"?

jquery - 如何初始化 jquery 关键帧

html - 如何制作一个拉伸(stretch)到页面长度的侧边栏?

javascript - 来自 javascript 的 Bootstrap 式警报