如何多元div淡出褪色循环动画 [英] how to multible div fadeout fadein loop animation

问题描述

我坚持关键帧动画。

我有一个fadein fadeout动画css。代码工作很好与3 div，但是当我添加+ 1 div和动画，css循环被打破。我希望他们同步工作，但如何？

I have a fadein fadeout animation css. Code work nice with 3 div but when I add + 1 div and animations, css loop is broken. I want them to work synchronously but how ?

有代码：

@-webkit-keyframes fadeA {
    0% {
        opacity: 0
    }

    13.2%,19.8% {
        opacity: 1;
        z-index: 5
    }

    100%,33% {
        opacity: 0
    }
}

@-webkit-keyframes fadeB {
    0%,33% {
        opacity: 0
    }

    46.2%,52.8% {
        opacity: 1;
        z-index: 5
    }

    100%,66% {
        opacity: 0
    }
}

@-webkit-keyframes fadeC {
    0%,66% {
        opacity: 0
    }

    79.2%,85.8% {
        opacity: 1;
        z-index: 5
    }

    100% {
        opacity: 0
    }
}

@-webkit-keyframes fadeD {
    0%,66% {
        opacity: 0
    }

    79.2%,85.8% {
        opacity: 1;
        z-index: 5
    }

    100% {
        opacity: 0
    }
}

@-moz-keyframes fadeA {
    0% {
        opacity: 0
    }

    13.2%,19.8% {
        opacity: 1;
        z-index: 5
    }

    100%,33% {
        opacity: 0
    }
}

@-moz-keyframes fadeB {
    0%,33% {
        opacity: 0
    }

    46.2%,52.8% {
        opacity: 1;
        z-index: 5
    }

    100%,66% {
        opacity: 0
    }
}

@-moz-keyframes fadeC {
    0%,66% {
        opacity: 0
    }

    79.2%,85.8% {
        opacity: 1;
        z-index: 5
    }

    100% {
        opacity: 0
    }
}

@-moz-keyframes fadeD {
    0%,66% {
        opacity: 0
    }

    79.2%,85.8% {
        opacity: 1;
        z-index: 5
    }

    100% {
        opacity: 0
    }
}

@keyframes fadeA {
    0% {
        opacity: 0
    }

    13.2%,19.8% {
        opacity: 1;
        z-index: 5
    }

    100%,33% {
        opacity: 0
    }
}

@keyframes fadeB {
    0%,33% {
        opacity: 0
    }

    46.2%,52.8% {
        opacity: 1;
        z-index: 5
    }

    100%,66% {
        opacity: 0
    }
}

@keyframes fadeC {
    0%,66% {
        opacity: 0
    }

    79.2%,85.8% {
        opacity: 1;
        z-index: 5
    }

    100% {
        opacity: 0
    }
}

@keyframes fadeD {
    0%,66% {
        opacity: 0
    }

    79.2%,85.8% {
        opacity: 1;
        z-index: 5
    }

    100% {
        opacity: 0
    }
}




     .anm1{
        width:100%;
        position: absolute;
        top: 3px;
        left: 0;
        opacity: 0;
        -webkit-animation: fadeA ease 15s infinite;
        -moz-animation: fadeA ease 15s infinite;
        animation: fadeA ease 15s infinite
    }

    .anm2 {
        width: 100%;
        position: absolute;
        top: 3px;
        left: 0;
        opacity: 0;
        -webkit-animation: fadeB ease 15s infinite;
        -moz-animation: fadeB ease 15s infinite;
        animation: fadeB ease 15s infinite
    }

    .anm3 {
        width: 100%;
        position: absolute;
        top: 3px;
        left: 0;
        opacity: 0;
        -webkit-animation: fadeC ease 15s infinite;
        -moz-animation: fadeC ease 15s infinite;
        animation: fadeC ease 15s infinite
    }
    .anm4 {
        width: 100%;
        position: absolute;
        top: 3px;
        left: 0;
        opacity: 0;
        -webkit-animation: fadeD ease 15s infinite;
        -moz-animation: fadeD ease 15s infinite;
        animation: fadeD ease 15s infinite
    }

<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>

推荐答案

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

You defined class anm2 to last three div's. I think it could be a reason of animation crash along with some grammar mistakes in css-rules.

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

Here is a solution of animate. Animation used with one keyframe due to different animation-delay for different 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>

这篇关于如何多元div淡出褪色循环动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！