CSS 动画在 Mozilla 中不起作用，但在 Chrome 中起作用。解决方案？答案

【问题标题】：CSS animation does not work in Mozilla but works in Chrome. the solution?CSS 动画在 Mozilla 中不起作用，但在 Chrome 中起作用。解决方案？
【发布时间】：2015-08-09 15:14:28
【问题描述】：

请看我的代码

HTML：

`<div id="animated-example" class="animated swing"><div class="navbar"></div></div>`

CSS：

.animated {

    color: #9f9f9f;

    min-height: 300px;

    width: 100%;   

    padding-bottom: 24px;

    background: #000000 url(../images/icons.svg) repeat center; 

    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;

    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;

    -webkit-animation-duration:15s;

    -moz-animation-duration:15s;

    -o-animation-duration:15s;

    animation-duration:15s;}

.navbar {

    position: absolute;
    min-height: 300px;
    width: 100%;
    padding-top: 24px;
    background-image: -o-linear-gradient(-89deg, #000000 0%, rgba(0,0,0,0.00) 100%);
    background-image: -moz-linear-gradient(-89deg, #000000 0%, rgba(0,0,0,0.00) 100%);
    background-image: -ms-linear-gradient(-89deg, #000000 0%, rgba(0,0,0,0.00) 100%);
    background-image: linear-gradient(-179deg, #000000 0%, rgba(0,0,0,0.00) 100%);
}

@-webkit-keyframes swing {

    0% {
        background-position-y:511px
        }
    100% {
        background-position-y:0
        }
}

@-moz-keyframes swing {

    0% {
        background-position-y:511px
        }
    100% {
        background-position-y:0
        }
}

@-o-keyframes swing {

    0% {
        background-position-y:511px
        }
    100% {
        background-position-y:0
        }
}

@keyframes swing {

    0% {
        background-position-y:511px
        }
    100% {
        background-position-y:0
        }
}

.swing { 

    -webkit-transform-origin: center; 
    transform-origin: center; 
    -webkit-animation-name: swing; 
    animation-name: swing; 
}

问题是动画在 Firefox 中不起作用，但 Chrome 和其他浏览器起作用

请看下面的视频，它会说话

http://sendvid.com/b1r3hofg

【问题讨论】：

您使用的是哪个版本的 Firefox？您是否尝试过添加-moz-animation-name: swing;？
嗨，兄弟。我的版本 mozilla : 37.0.2 我在类 swing 中添加了 -moz-animation-name: swing;但是没用

标签： css google-chrome animation cross-browser mozilla

【解决方案1】：

这个怎么样：

  .swing {
  -webkit-transform-origin: center; 
  -moz-transform-origin: center;
  transform-origin: center; 
 -webkit-animation-name: swing; 
 -moz-animation-name: swing;
 animation-name: swing; 
  }

如果这不起作用，虽然它可能是另一个代码问题并且您可能已经知道这一点，但我会提到一些 CSS 属性（尤其是转换）是依赖于浏览器的（意味着它们仅适用于某些浏览器）。 ..尽管您正在做的事情似乎应该可行。

无论如何，祝你好运朋友！ :)

【讨论】：

嗨。请更新图片网址。我们无法访问它。 :) ~CSS 的第 12 行：背景：#000000 url(../images/icons.svg) 重复中心；
嗨，亲爱的，我不是那个意思。我的评论是：你能提供图片的网址吗？我看不到图像，但想复制您的情况。 :)

【解决方案2】：

我修好了：

@keyframes 摆动 {

        0% {
    background-position: 0 511px;
    }
100% {
    background-position:0
    }

}

【讨论】：