【问题标题】:This animation(css3) not working on Firefox此动画(css3)不适用于 Firefox
【发布时间】:2014-03-26 17:53:38
【问题描述】:

此动画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 以外的所有版本

标签: css css-animations


【解决方案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;

【讨论】:

    猜你喜欢
    • 2014-06-13
    • 2015-07-29
    • 1970-01-01
    • 2014-05-20
    • 1970-01-01
    • 2013-03-11
    • 1970-01-01
    • 2016-06-12
    • 1970-01-01
    相关资源
    最近更新 更多