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

当我为图像滑动滑块设置-moz-prefix时，我试图制作css3滑块，甚至在chrome中都不起作用，更不用说Mozilla Firefox了。但是如果我不将-moz前缀与-webkit一起使用，那么=webkit-prefix在Chrome中运行良好。甚至我也声明了字幕动画。字幕动画不起作用

---

看看我的代码：

我重新整理了代码，将关键帧动画定义放在使用它们的属性下面。另外，您只有

-webkit动画：声明，所以我添加了mozilla、microsoft、opera和W3C兼容浏览器的其他声明

我还结合了
动画迭代计数：进入
动画：声明，因为它在文件中保存了少量文本

因此，现在，与之前相比：

.container h5 {
    background:rgba(0,0,0,0.5);
    position:absolute;
    bottom:4px;
    width:100%;
    padding:5px;
    color:#fff;
    text-align:center;
    margin-bottom:0px;
    -webkit-animation: headings 20s;
}

@-webkit-keyframes headings {
  10%  {
     margin-bottom:4px;
  }
  15%,30% {
     margin-bottom:-200px;
  }
}

看起来是这样的：

.container h5 {
    background:rgba(0,0,0,0.5);
    position:absolute;
    bottom:4px;
    width:100%;
    padding:5px;
    color:#fff;
    text-align:center;
    margin-bottom:0px;
    -webkit-animation: headings 20s;
    -moz-animation: headings 20s;
    -ms-animation: headings 20s;
    -o-animation: headings 20s;
    animation: headings 20s;
}

我添加了相应的关键帧定义

最后一支笔是
 我在查看您的代码时发现了一些问题：


应该是
@keframes slide{}
而不是
@keyframes'slide'{}
幻灯片动画缺少结尾
}
添加了一个初始
左：0定位到
.container ul
as

将200px的特定高度添加到
.container
，以使标题动画看起来更清晰

这将像FirefoxV22一样工作，但您仍然需要添加浏览器前缀以获得完全支持


.container {
    width:200px;
    height:200px;
    margin:0px auto;
    overflow:hidden;
}
.container ul {
    width:1000px;
    list-style:none;
    position:relative;
    left:0;
    animation: slide 20s infinite;
}
ul, li {
    padding:0px;
    margin:0px;
}
.container ul li {
    position:relative;
    left:0px;
    float:left;
}
.container h5 {
    background:rgba(0, 0, 0, 0.5);
    position:absolute;
    bottom:4px;
    width:100%;
    padding:5px;
    color:#fff;
    text-align:center;
    margin-bottom:0px;
    animation: headings 4s infinite;
}
@keyframes slide {
    10% {
        left:0px;
    }
    15%, 30% {
        left:-200px;
    }
    35%, 50% {
        left:-400px;
    }
    55%, 70% {
        left:-600px;
    }
    75%, 90% {
        left:-800px;
    }
}
@keyframes headings {
    10% {
        margin-bottom:4px;
    }
    25%, 50% {
        margin-bottom:-150px;
    }
}

在为mozilla添加了关键帧定义和css属性（基本上是@Ilan Biala所说的：css标记）之后，我仍然无法在OSX Firefox v22上使用动画

添加首字母：

left: 0px;

使动画开始工作。似乎firefox不喜欢左动画，除非它首先在css类中明确定义。
试试这个？效果很好，我对FF和IE10都使用了此修复程序。