这个CSS3动画在Firefox上无法正常工作。

Question

这个动画在最新版的Firefox上无法运行，但在Firefox 26上可以。我不知道为什么它不能正常工作。它只使用边框宽度和背景颜色。这是动画链接：http://jsfiddle.net/ts9AG/。

.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;
  }
}

- Bilguun

---

在哪个Firefox版本中它无法工作？ - Vucko

除了版本26之外的所有版本 - Bilguun

Answer 1

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;

- Mathias