CSS3 关键帧动画在 Firefox 中不起作用答案

【问题标题】：CSS3 keyframe animation not working in FirefoxCSS3 关键帧动画在 Firefox 中不起作用
【发布时间】：2013-09-18 19:07:50
【问题描述】：

这是我的 CSS3 动画的一小段摘录。适用于 Chrome、IE10 但不适用于 FF。我在这里错过了什么？

小提琴

http://jsfiddle.net/3k9VJ/

HTML

<div>
    <div class="pic u1"></div>
    <div class="pic u2"></div>
    <div class="pic u3"></div>
</div>

CSS

@-webkit-keyframes scrollem {
  0% {
    background-position-x: 0px;
  }

  100% {
    background-position-x: -2000000px;
  }
}

@-moz-keyframes scrollem {
 0% {
    background-position-x: 0px;
  }

  100% {
    background-position-x: -2000000px;
  }
}

@-ms-keyframes scrollem {
 0% {
    background-position-x: 0px;
  }

  100% {
    background-position-x: -2000000px;
  }
}

@keyframes scrollem {
 0% {
    background-position-x: 0px;
  }

  100% {
    background-position-x: -2000000px;
  }
}


.pic {
    width:100%;
    height:400px;
    position:absolute;
  background-repeat: repeat-x;  
    background-size: cover !important;  
    -webkit-animation-timing-function: linear;
    -webkit-animation-name: scrollem;
    -webkit-animation-iteration-count: infinite;    
    -webkit-animation-direction: normal;

    -moz-animation-timing-function: linear;
    -moz-animation-name: scrollem;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;       

    -ms-animation-timing-function: linear;
    -ms-animation-name: scrollem;
    -ms-animation-iteration-count: infinite;
    -ms-animation-direction: normal;    

    animation-timing-function: linear;
    animation-name: scrollem;
    animation-iteration-count: infinite;
    animation-direction: normal;    



}
.u1 {
    background: transparent url('http://i.telegraph.co.uk/multimedia/archive/02387/ufo_2387810b.jpg');
        -webkit-animation-duration: 100000s;
    -moz-animation-duration: 100000s;
    -ms-animation-duration: 100000s;
    animation-duration: 100000s;
}
.u2 {
    top:100px;
    background: transparent url('http://www.techi.com/wp-content/uploads/2012/11/UFO-4.jpg');
            -webkit-animation-duration: 200000s;
    -moz-animation-duration: 200000s;
    -ms-animation-duration: 200000s;
    animation-duration: 200000s;
}
.u3 {
    top:200px;
    background: transparent url('http://www.blisstree.com/wp-content/uploads/2013/07/UFO-EARTHLINGS.jpg') ;
        -webkit-animation-duration: 300000s;
    -moz-animation-duration: 300000s;
    -ms-animation-duration: 300000s;
    animation-duration: 300000s;    
}

【问题讨论】：

标签： css firefox css-animations

【解决方案1】：

Firefox 不支持 background-position-x 或 background-position-y，这就是为什么您无法在此浏览器上为单个背景轴设置动画。

【讨论】：

谢谢！将动画目标更改为background-position: 0 0;

【解决方案2】：

很遗憾，Firefox 不支持background-position-x 或background-position-y。您必须改用 background-position 简写：

@-moz-keyframes scrollem {
  0% {
    background-position: 0px 0px;
  }

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

@keyframes scrollem {
  0% {
    background-position: 0px 0px;
  }

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

同样，与 Firefox 无关，但您应该从动画中删除所有 -ms- 前缀的痕迹，因为任何稳定版本的 IE 都不使用它。

【讨论】：