0
私はキーフレームのアニメーションにこだわりました。multible divへのフェードアウトfadeinループアニメーション
私はフェードインフェードアウトアニメーション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>
に異なるアニメーション-遅延に1つのキーフレームで使用されるアニメーションはBanzayありがとう、私も自分のコードが、あなたの答えが良い固定しました。 –