Question

我正在尝试制作css3滑块，当我为图像滑动滑块设置-moz-前缀时甚至不能在Chrome中工作，更不用说Mozilla Firefox了。但是= webkit-前缀在Chrome中运行良好，如果我不使用-moz前缀和-webkit。甚至我宣布了标题动画。标题动画不起作用。

请查看我的代码：http://codepen.io/faeshaan/pen/pefwq

Answer 1

我发现一些问题在看你的代码：

syntax for keyframes应为@keframes slide{}而不是@keyframes 'slide' {}
幻灯片动画错过了结束}
将left:0;位置.container ul添加到.container
为.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; } }添加了200px的特定高度，使标题动画看起来更清晰。

这将在Firefox v22中有效，但您仍需要添加浏览器前缀以获得完全支持。

<强> dc5 suggested

{{1}}

Answer 2

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

添加首字母：

left: 0px;

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

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

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

最后一支笔是here。

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

3 个答案: