CSSアニメーションを設定する

CSSプロパティを動的にセットしてアニメーションを発生させる

CSSはtransitionプロパティやanimationプロパティを使うとアニメーションを設定することができます。
今回はこの2つのCSSプロパティをJavaScriptから動的に設定することで、指定したタイミングでアニメーションが実行されるようにする方法を解説していきます。

具体的には、setIntervalメソッドを使ってアニメーション開始までの時間を制御し、時間が来たら対象のHTML要素にclass属性を追加することでアニメーションを実行します。
サンプルページはこちら

以下の例は、ページ読み込み完了から5秒後にボタンの背景色（background-colorプロパティ）に対してアニメーションを実行します。

HTML コード例

<article>
	<h1>JavaScriptレシピ</h1>
	<p id="text">ボタンのアニメーション開始まであと <span>5</span>秒</p>
	<a id="btn_sample" class="btn" href="#">サンプルボタン</a>
</article>

CSS コード例

a.btn {
	display: inline-block;
	padding: 10px 20px;
	color: #fff; 
	text-decoration: none;
	border-radius: 5px;
	background-color: #4a93cb;
	transition-property: background-color;
	transition-duration: .5s;
	transition-timing-function: ease;
}
a.btn_effect {
	background-color: #a1cef1;
}

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

	let count = 5;
	let interval_id = null;
	const text = document.querySelector("#text span");
	const btn = document.getElementById("btn_sample");

	interval_id = setInterval( () => {

		if( 0 < count ) {
			count--;
		} else {
			btn.classList.add('btn_effect');
			clearInterval(interval_id);
		}

		text.textContent = count;
	}, 1000);

	btn.addEventListener("transitionend", function(){
		btn.classList.remove('btn_effect');
	});
});

CSSでtransitionプロパティをあらかじめ用意しておきます。
実行するアニメーションについては全てCSSから設定するため、JavaScriptではどのタイミングで実行するかだけを制御します。

ページの読み込み完了後にsetIntervalメソッドを実行して、5秒後にid属性「btn_sample」のボタンへclassList.addメソッドを使ってclass属性にクラス名「btn_effect」を追加します。
class属性が追加されるとtransition-propertyプロパティで設定しているbackground-colorプロパティを対象にした背景色のアニメーションが実行されます。

さらにtransitionプロパティによるアニメーションが終了したタイミングでイベント「transitionend」を検出して、今度はclassList.removeメソッドを使って先ほど追加したクラス名「btn_effect」を削除します。
クラス名を削除するとbackground-colorプロパティの値が最初の状態に戻るため、ここでまた改めてアニメーションが発生します。
ここまでの2回のアニメーションによって、ボタンが光って戻るようなエフィクトを付けます。

animationプロパティを使ったアニメーションを動的に設定する

続いてanimationプロパティによるアニメーションを指定したタイミングで実行していきます。

以下の例は、HTMLは先ほどと全く同じです。
CSSについてはanimationプロパティに関する記載に変更しています。

animationプロパティによるアニメーションが終了したタイミングは「animationend」が発生しまするため、JavaScriptのコードはイベントリスナーに登録するイベントを「animationend」に変更します。

HTML コード例

<article>
	<h1>JavaScriptレシピ</h1>
	<p id="text">ボタンのアニメーション開始まであと <span>5</span>秒</p>
	<a id="btn_sample" class="btn" href="#">サンプルボタン</a>
</article>

CSS コード例

a.btn {
	display: inline-block;
	padding: 10px 20px;
	color: #fff; 
	text-decoration: none;
	border-radius: 5px;
	background-color: #4a93cb;
}
a.btn_effect {
	animation: a1 .5s ease 2 alternate;
}
@keyframes a1 {
	0% {background-color: #4a93cb;}
	100% {background-color: #a1cef1;}
}

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

	let count = 5;
	let interval_id = null;
	const text = document.querySelector("#text span");
	const btn = document.getElementById("btn_sample");

	interval_id = setInterval( () => {
	
		if( 0 < count ) {
			count--;
		} else {
			btn.classList.add('btn_effect');
			clearInterval(interval_id);
		}
		text.textContent = count;

	}, 1000);

	btn.addEventListener("animationend", function(){
		btn.classList.remove('btn_effect');
	});
});

実行した内容自体はtransitionプロパティで実行したものとほぼ同じです。
表示確認についてはこちら

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。