HTML要素のサイズをアニメーションで変化させる

HTML要素のサイズをアニメーションで変化させる

CSSではHTML要素のサイズをwidthプロパティ、heightプロパティで指定したり、要素内の余白をpaddingプロパティで指定します。
JavaScriptのWeb Animations APIを使ってこれらのプロパティの値を変化させることで、HTML要素のサイズ変更をアニメーションにして実装することができます。

以下の例はarticle要素のwidthプロパティとheightプロパティの値を変化させることでサイズ変更のアニメーションを実装しています。
以下のコードを使ったサンプルページはこちら

HTML コード例

<article id="content1">
	<h1>JavaScriptレシピ</h1>
	<a id="btn_start" class="btn" href="#">アニメーション開始</a>
</article>

CSSでarticle要素のwidthプロパティとheightプロパティの初期値を設定します。

CSS コード例

article {
	padding: 20px;
	width: 50%;
	height: 150px;
	background-color: #5face7;
}
h1 {
	margin: 0 0 20px;
	padding: 0;
	font-size: 100%;
}
a.btn {
	display: inline-block;
	padding: 10px 20px;
	color: #fff;
	font-size: 86%;
	text-decoration: none;
	border-radius: 5px;
	background-color: #4a93cb;
}

KeyframeEffectオブジェクトのコンストラクタにアニメーションの設定を指定します。
シーン1の開始地点からシーン4の終了地点まで、シーンを1つずつ進めていきます。

JavaScript コード例

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

	const btn_start = document.getElementById('btn_start');
	const content1 = document.getElementById('content1');

	// KeyframeEffectオブジェクトのインスタンス作成
	let keyframeeffect = new KeyframeEffect(
		content1,
		[
			{ // シーン1
				width: '50%',
				height: '150px',
				offset: 0,
				easing: 'ease'
			},
			{ // シーン2
				width: '90%',
				height: '300px',
				offset: 0.3
			},
			{ // シーン3
				width: '90%',
				height: '300px',
				offset: 0.7,
				easing: 'ease'
			},
			{ // シーン4
				width: '50%',
				height: '150px',
				offset: 1
			}
		],
		{
			duration: 2000,
			direction: 'alternate',
			iterations: 2
		}
	);

	// Animationオブジェクトのインスタンス作成
	let animation = new Animation(keyframeeffect);

	// ボタンが押されたらアニメーション再生
	btn_start.addEventListener('click', function(e){
		e.preventDefault();
		animation.play();
	});
});

シーンが進むごとにwidthプロパティとheightプロパティの値を更新していきます。

シーンごとに指定しているoffsetの値は再生時間の中における位置です。
アニメーションの全体の再生時間はdurationで指定した2秒（2000ミリ秒）になるので、例えばシーン2の「offset: 0.3」は6００ミリ秒の地点に該当します。

同様に、シーン3の「offset: 0.7」は1400ミリ秒の地点、シーン4の「offset: 1」は2000ミリ秒の終了地点です。

HTML要素の余白サイズをアニメーションで変化させる

先述のWeb Animations APIを使ってwidthプロパティとheightプロパティの値を更新してHTML要素サイズをアニメーションしたのと同じ方法で、paddingプロパティの余白サイズを更新してアニメーションさせることも可能です。

以下の例は先ほどのコードとほぼ同じですが、KeyframeEffectオブジェクトで使っているプロパティをpaddingRightとpaddingBottomに変更しています。

以下のコードを使ったサンプルページはこちら

JavaScript コード例

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

	const btn_start = document.getElementById('btn_start');
	const content1 = document.getElementById('content1');

	// KeyframeEffectオブジェクトのインスタンス作成
	let keyframeeffect = new KeyframeEffect(
		content1,
		[
			{ // シーン1
				paddingRight: '20px',
				paddingBottom: '20px',
				offset: 0,
				easing: 'ease'
			},
			{ // シーン2
				paddingRight: '40%',
				paddingBottom: '200px',
				offset: 0.3
			},
			{ // シーン3
				paddingRight: '40%',
				paddingBottom: '200px',
				offset: 0.7,
				easing: 'ease'
			},
			{ // シーン4
				paddingRight: '20px',
				paddingBottom: '20px',
				offset: 1
			}
		],
		{
			duration: 2000,
			direction: 'alternate',
			iterations: 2
		}
	);

	// Animationオブジェクトのインスタンス作成
	let animation = new Animation(keyframeeffect);

	// ボタンが押されたらアニメーション再生
	btn_start.addEventListener('click', function(e){
		e.preventDefault();
		animation.play();
	});
});

KeyframeEffectオブジェクトに指定するプロパティ名について、「background」や「opacity」のように単語が1つのときはそのまま指定することができます。
しかし、今回の「padding-right」や「padding-bottom」のような2つ以上の単語がある場合は「paddingRight」や「paddingBottom」のように間の「–」を取って2つ目以降の単語の頭文字を大文字にするキャメルケース (ローワーキャメルケース)形式で指定する必要があります。