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

Question

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

只要看看我的代码：http://codepen.io/faeshaan/pen/pefwq

Answer 1

在添加了mozilla的关键帧定义和css属性（基本上是@Ilan Biala所说的re:css标记）后，动画在OSX Firefox v22上仍然不适用。

添加首字母：

left: 0px;

使动画开始工作。firefox似乎不喜欢左动画，除非它首先在css类中明确定义。

Answer 2

我在查看您的代码时发现了一些问题：

• 关键帧的语法应该是@keframes slide{}而不是@keyframes 'slide' {}
• 幻灯片动画缺少一个结束}
• 如dc5所建议的，将初始left:0;位置添加到.container ul
• 为.container添加了200px的特定高度，使标题动画看起来更干净

这将在Firefox v22中正常工作，但您仍然需要添加浏览器前缀以获得完全支持。

工作示例

.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;
    }
}

Answer 3

我重新排列了代码，将关键帧动画定义放在使用它们的属性下面。另外，您只有-webkit-animation: ;声明，所以我为mozilla、microsoft、opera和W3C兼容的浏览器添加了其他声明。

我还将animation-iteration-count: ;组合到animation: ;声明中，因为它在文件中保存了一些文本。

所以现在不是你以前的了：

.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;
}

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

最后一支钢笔在这儿。