Question

亲爱的朋友冒着痛苦的风险，我可以谦卑地提交这段代码供你仔细检查，因为在我看来，我已经按照所有教程的说明，只是在最后才解开。当我尝试在CSS验证中验证代码时，我得到五个警告，

抱歉，at-rule @ -moz-keyframes未实现。属性-moz-animation是未知的供应商扩展

吞！

对于我的生活，我无法看到我出错的地方所以，如果我可以谦卑地请求任何帮助，我将非常高兴，因为我的野心已经有一段时间试图建立一个小滑块，没有如何基本 - 亲切的问候MSK

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div#container{
margin: 0 auto;
overflow: hidden;
}
div#slider{
border: 1px solid black;
width:500px;
height:500px;
margin-left:auto;
margin-right:auto;
background-color:#ffffff;
overflow:hidden;
 }

 div#slider ul{
margin:0;
padding:0;
 }

 div#slider li{
position: absolute;
list-style:none;
 }

 div#slider ul li .animation_1{
-moz-animation:cycle 25s linear infinite;
 }

 div#slider ul li .animation_2{
-moz-animation:cycletwo 25s linear infinite;
 }

 div#slider ul li .animation_3{
-moz-animation:cyclethree 25s linear infinite;
 }

 div#slider ul li .animation_4{
-moz-animation:cyclefour 25s linear infinite;
 }

 div#slider ul li .animation_5{
-moz-animation:cyclefive 25s linear infinite;
 }
@-moz-keyframes cycle{

        0%{top:0px;}
        4%{top:0px;}
        16%{top:0px; opacity:1; z-index:0;}
        20%{top:325px; opacity:0; z-index:0;}
        21%{top:-325px; opacity:0; z-index:-1;}
        92%{top:-325px; opacity:0;}
        100%{top:0px; opacity:1;}
 }

 @-moz-keyframes cycletwo{

        0%{top:0px;}
        4%{top:0px;}
        16%{top:0px; opacity:1; z-index:0;}
        20%{top:325px; opacity:0; z-index:0;}
        21%{top:-325px; opacity:0; z-index:-1;}
        92%{top:-325px; opacity:0;}
        100%{top:0px; opacity:1;}
 }

 @-moz-keyframes cyclethree{

        0%{top:0px;}
        4%{top:0px;}
        16%{top:0px; opacity:1; z-index:0;}
        20%{top:325px; opacity:0; z-index:0;}
        21%{top:-325px; opacity:0; z-index:-1;}
        92%{top:-325px; opacity:0;}
        100%{top:0px; opacity:1;}
}

@-moz-keyframes cyclefour{

        0%{top:0px;}
        4%{top:0px;}
        16%{top:0px; opacity:1; z-index:0;}
        20%{top:325px; opacity:0; z-index:0;}
        21%{top:-325px; opacity:0; z-index:-1;}
        92%{top:-325px; opacity:0;}
        100%{top:0px; opacity:1;}
}

@-moz-keyframes cyclefive{

        0%{top:0px;}
        4%{top:0px;}
        16%{top:0px; opacity:1; z-index:0;}
        20%{top:325px; opacity:0; z-index:0;}
        21%{top:-325px; opacity:0; z-index:-1;}
        92%{top:-325px; opacity:0;}
        100%{top:0px; opacity:1;}
}
</style>
</head>
<body>
<div id="container">
<div id="slider">
    <ul>
        <li id="first" class="animation_1"><img src="bird.png"></li>
        <li id="second" class="animation_2"><img src="star.png"></li>
        <li id="third" class="animation_3"><img src="owl.png"></li>
        <li id="fourth" class="animation_4"><img src="shape.png"></li>
        <li id="fifth" class="animation_5"><img src="pony.png"></li>
    </ul>
</div>
</div>
</body>
</html>

Answer 1

动画类名称在您的上方，因此您不希望在li和.animation_X之间留出空格：

div#slider ul li.animation_1 {
  -moz-animation:cycle 25s linear infinite;
}

这对我来说很好，否则在firefox的本地html文件中，动画是相同的，所以你真的只有看到一件动画，因为它们都是彼此重叠的。我假设你还在努力。

-moz-animation有困难

1 个答案: