Html CSS动画仅在Chrome中工作，不考虑供应商前缀

我用CSS创建了一个动画横幅，它在Chrome中运行得非常完美。然而，尽管使用了vedor前缀-moz-和-o-，该横幅在IE和Firefox中都不起作用

其中：

身体{ 利润率：50像素； 背景：C8C9E0； } Divu包装{ 宽度：728px； 高度：90px； 保证金：0px自动； 边框：1D1F5E 1px实心； 溢出：隐藏； 背景色：000； 背景图片：urlbackground.jpg； 位置：相对位置； } 横幅幻灯片1{ 宽度：361px； 高度：55px； 边缘顶部：20px； 位置：绝对位置； 左：160像素； z指数：自动； } 横幅图幻灯片2{ 宽度：355px； 高度：51px； 位置：绝对位置； 边缘顶部：22px； 左：160像素； z指数：1； } 横幅幻灯片3{ 宽度：300px； 高度：38px； 绝对位置； 边缘顶部：25px； 左边距：200px； z指数：2； } 横幅幻灯片1{ -webkit动画名称：banner_slide1； -webkit动画持续时间：10秒； -webkit动画迭代计数：无限； -moz动画名称：banner_slide1； -moz动画持续时间：10s； -moz动画迭代次数：无限； -o-animation-name:banner_slide1； -o-动画持续时间：10秒； -o-动画-迭代-计数：无限； -动画名称：banner_slide1； -动画持续时间：10秒； -动画迭代次数：无限； } 横幅图幻灯片2{ -webkit动画名称：banner_slide2； -webkit动画持续时间：10秒； -webkit动画迭代计数：无限； -mos动画名称：banner_slide2； -moz动画持续时间：10s； -moz动画迭代次数：无限； -o-animation-name:banner_slide2； -o-动画持续时间：10秒； -o-动画-迭代-计数：无限； -动画名称：banner_slide2； -动画持续时间：10秒； -动画迭代次数：无限； } 横幅幻灯片3{ -webkit动画名称：banner_slide3； -webkit动画持续时间：10秒； -webkit动画迭代计数：无限； -mos动画名称：banner_slide3； -moz动画持续时间：10s； -moz动画迭代次数：无限； -o-animation-name:banner_slide3； -o-动画持续时间：10秒； -o-动画-迭代-计数：无限； -动画名称：banner_slide3； -动画持续时间：10秒； -动画迭代次数：无限； } @-webkit关键帧横幅\u幻灯片1{ 0% { 不透明度：0； } 6% { 不透明度：0； } 8% { 不透明度：1； } 24% { 不透明度：1； } 28% { 不透明度：0； } 100% { 不透明度：0； } } @-moz关键帧横幅\u幻灯片1{ 0% { 不透明度：0； } 6% { 不透明度：0； } 8% { 不透明度：1； } 24% { 不透明度：1； } 28% { 不透明度：0； } 100% { 不透明度：0； } } @-o-关键帧横幅\u幻灯片1{ 0% { 不透明度：0； } 6% { 不透明度：0； } 8% { 不透明度：1； } 24% { 不透明度：1； } 28% { 不透明度：0； } 100% { 不透明度：0； } } @关键帧横幅\u幻灯片1{ 0% { 不透明度：0； } 6% { 不透明度：0； } 8% { 不透明度：1； } 24% { 不透明度：1； } 28% { 不透明度：0； } 100% { 不透明度：0； } } @-webkit关键帧横幅\u幻灯片2{ 0% { 不透明度：0； } 30.5% { 不透明度：0； } 32.5% { 不透明度：1； } 52% { 不透明度：1； } 60% { 不透明度：0； } 100% { 不透明度：0； } } @-moz关键帧横幅\u幻灯片2{ 0% { 不透明度：0； } 30.5% { 不透明度：0； } 32.5% { 不透明度：1； } 52% { 不透明度：1； } 60% { 不透明度：0； } 100% { 不透明度：0； } } @-o-关键帧横幅\ U滑块2{ 0% { 不透明度：0； } 30.5% { 不透明度：0； } 32.5% { 不透明度：1； } 52% { 不透明度：1； } 60% { 不透明度：0； } 100% { 不透明度：0； } } @关键帧横幅\u幻灯片2{ 0% { 不透明度：0； } 30.5% { 不透明度：0； } 32.5% { 不透明度：1； } 52% { 不透明度：1； } 60% { 不透明度：0； } 100% { 不透明度：0； } } @-webkit关键帧横幅\u幻灯片3{ 0% { 不透明度：0； } 60% { 不透明度：0； } 63% { 不透明度：1； } 100% { 不透明度：1； } } @-moz关键帧横幅\u幻灯片3{ 0% { 不透明度：0； } 60% { 不透明度：0； } 63% { 不透明度：1； } 100% { 不透明度：1； } } @-o-关键帧横幅\u幻灯片3{ 0% { 不透明度：0； } 60% { 不透明度：0； } 63% { 不透明度：1； } 100% { 不透明度：1； } } @关键帧横幅\u幻灯片3{ 0% { 不透明度：0； } 60% { 不透明度：0； } 63% { 不透明度：1； } 100% { 不透明度：1； } }

---

这里是小提琴：问题是由您的非前缀动画属性引起的。删除连字符-如下所示：-动画名称：banner\u slide1；成为动画名称：banner_slide1；对所有未加前缀的动画重复此操作。您只需要-webkit-的前缀。投票关闭，因为问题是由键入错误引起的：。它适用于所有现代浏览器和IE10+@misterManSam，非常感谢！我知道我忽略了一些简单的事情。不断学习：再次感谢！