multible divへのフェードアウトfadeinループアニメーション

Question

私はキーフレームのアニメーションにこだわりました。

私はフェードインフェードアウトアニメーションCSSを持っています。コードは3 divでうまく動作しますが、1 divとアニメーションを追加すると、CSSループが壊れます。私はそれらを同期して動作させるが、どうしたらよいのだろうか？あなたは3つのdivのを最後に、クラスanm2を定義し

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

 
\t \t \t <div class="anm1">FIRST TEXT </div> 
 

 
\t \t  <div class="anm2">SECOND TEXT</div> 
 

 
      <div class="anm2">THIRD TEXT</div> 
 
      
 
      <div class="anm2">FOURth TEXT</div> 
 
\t \t 
 
\t \t </div>

Answer 1

：

はコードがあります。私はそれがCSS規則のいくつかの文法ミスと共にアニメーションクラッシュの理由かもしれないと思う。

ここにアニメーションの解決策があります。原因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> 
 
\t <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>