CSSだけでアニメーション【@keyframes】２回繰り返されるメモ
原因
初期値が表示状態の場合、アニメーションを遅延させると、表示された状態からアニメーションに入るので２回アニメーションが処理されているように見える。
そのため初期値を非表示状態にしなければいけない。
.fedein {
opacity:0;
animation: fadeIn 2s ease 2s 1 normal;
-webkit-animation: fadeIn 2s ease 2s 1 normal;
animation-fill-mode: forwards;
}
@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}また処理後の状態を指定しておかないと、アニメーション後も【opacity:0;】を適応してしまうため
animation-fill-mode: forwards;を記入して、アニメーションの終了時の状態を指定しておく。
ちなみにこちらのアニメーションはページ表示時に起動するため、スクロールで要素がモニター内に入ったときアニメーションを起動する場合は、別の記述をする必要がある。
