Question

请查看我的代码

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

Answer 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属性（尤其是转换）是依赖于浏览器的（这意味着它们仅适用于某些浏览器）。 ..尽管你正在做什么似乎应该工作。

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

Answer 2

我修正了它：

@keyframes swing {

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

}

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

2 个答案: