Question

我坚持使用关键帧动画。

我有一个fadein fadeout动画css。代码工作很好用3 div但是当我添加+ 1 div和动画时，css循环被打破。我想让他们同步工作但是怎么样？

有代码：

<div>
             

		 	<div class="anm1">FIRST TEXT </div>

		    <div class="anm2">SECOND TEXT</div>  

            <div class="anm2">THIRD TEXT</div> 
            
            <div class="anm2">FOURth TEXT</div> 
		 
		</div>

{{1}}

Answer 1

您将类anm2定义为最后三个div。我认为这可能是动画崩溃的原因以及css规则中的一些语法错误。

这是animate的解决方案。由于不同div-s的动画延迟不同，动画与一个关键帧一起使用

@-webkit-keyframes fadeA {
    0% {opacity: 0}
    12.5% { opacity: 1; }
    25% { opacity: 0; }
    100% { opacity: 0 }
}
@keyframes fadeA {
    0% {opacity: 0}
    12.5% { opacity: 1; }
    25% { opacity: 0; }
    100% { opacity: 0 }
}
[class^="anm"] {
  display: inline-block;
        position: absolute;
        top: 3px;
        left: 0;
        opacity: 0;
        -webkit-animation: fadeA ease 12s;
        -moz-animation: fadeA ease 12s ;
        animation: fadeA ease 12s ;
}
.anm1{
        -webkit-animation-delay: 0s;
        animation-delay: 0s;
    }
.anm2 {
        -webkit-animation-delay: 3s;
        animation-delay: 3s;
    }
.anm3 {
        -webkit-animation-delay: 6s;
        animation-delay: 6s;
    }
.anm4 {
        -webkit-animation-delay: 9s;
        animation-delay: 9s;
    }

<div>
	<div class="anm1">FIRST TEXT </div>
    <div class="anm2">SECOND TEXT</div>  
    <div class="anm3">THIRD TEXT</div> 
    <div class="anm4">FOURth TEXT</div> 
</div>

如何使用multible div fadeout fadein循环动画

1 个答案: