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

我想让css3滑块在设置时使用-moz-前缀用于图像滑动滑块甚至不能在chrome中工作更不用说Mozilla Firefox。但= webkit-前缀在Chrome中运行良好，如果我不使用-moz前缀和-webkit。即使我宣布字幕动画。标题动画无效。CSS3关键帧动画在Mozilla Firefox中不工作

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

来源

2013-07-24 Faysal Ahmed

试试这个？ http://codepen.io/anon/pen/AjoHm – dc5

我重新安排你的代码，把正在使用它们的属性下方的关键帧动画的定义。此外，您只有-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。

来源

2013-07-24 20:00:55

为您做了这项工作？ –

我发现看着你的代码的几个问题：

syntax for keyframes应@keframes slide{}不@keyframes 'slide' {}
幻灯片动画是缺少一个右}
添加一个初始left:0;位置.container ul为dc5 suggested
将特定高度200px添加到.container以使标题ani mation看起来更清洁一些。

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

Working Example

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

来源

2013-07-24 20:37:41 apaul

在Mozilla浏览器（基本上是@Ilan比亚瓦说重：CSS标记）的关键帧定义和CSS属性添加动画后仍然没有为我工作在OSX上的Firefox V22 。

添加一个初始：

left: 0px;

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

来源

2013-07-24 20:40:12 dc5

工程很好，我用FF和IE10这个修补程序。 – 321zeno

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

回答

相关问题