CSSアニメーションをページロードが完了してから始める方法

2024年3月8日

ホームページのメインビジュアルに、CSSアニメーションを作りました。

しかし、ページのロードが完了する前に、CSSアニメーションが始まってしまいました。

ややロードに時間がかかるホームページだったので、CSSアニメーションがうまく見せられないという事象が発生しました。

そこで、JavaScriptを使って、コントロールする方法を学んだのでメモしておきます。

使うのは「addEventListener」

使うのは、JSのaddEventListenerです。

最初は、window.onloadを使っていましたが、こちらは複数の命令が発生すると、上書きされてしまうので、addEventListenerを使った方が良いでしょう。

具体的には、このようなプログラムを書きました。

<div id="feedin">フェードインテキスト</div>

#feedin {
  opacity: 0;
}

.alpha {
animation:alpha 5s;
animation-fill-mode:forwards;
}

@keyframes alpha {
0% {
opacity:0;
}

100% {
opacity:1;
}
}

window.addEventListener('load', function() {
  var anime1 = document.getElementById("feedin");
  anime1.classList.add("alpha");
})

以上です。