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

Question

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

看看我的代码：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
• 添加了 200px 的特定高度.container以使标题动画看起来更清晰。

这将像在 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;
}

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

最后一支笔在这里。