CSSアニメーション作成

CSSアニメーションの基本構造と記述方法

CSSアニメーションは、@keyframesルールで動きの段階を定義し、animationプロパティで要素に適用します。
例えば、@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }のように記述し、animation: fadeIn 2s ease-in-out;で呼び出します。
これにより、スムーズなフェードイン効果を簡単に実装可能です。

アニメーションプロパティの詳細と制御

animation-duration（時間）、animation-timing-function（イージング）、animation-delay（開始遅延）、animation-iteration-count（繰り返し回数）など、多彩なプロパティで細かく制御できます。
適切な設定により自然な動きやループアニメーションが実現でき、ユーザー体験を向上させます。

トリガーとパフォーマンス最適化のポイント

アニメーションはページ読み込み時だけでなく、ユーザーのスクロールやホバーなどのイベントで発火させることが多いです。
しかし、多数のアニメーションを同時に動かすとパフォーマンスに悪影響を及ぼすため、will-changeプロパティやtransformを使ったGPUアクセラレーションを活用し最適化しましょう。

アクセシビリティとユーザビリティへの配慮

アニメーションは視覚的に魅力的ですが、過度な動きはユーザーの注意を散らし、特に発作リスクのあるユーザーには負担となる場合があります。
CSSメディアクエリ@media (prefers-reduced-motion: reduce)を使い、アニメーションを控えめにする設定を行うことが推奨されます。

実務での活用例と効率的な制作方法

ボタンのホバーエフェクトやローディングアニメーション、ページ遷移の演出など、様々な場面でCSSアニメーションは役立ちます。
SassやPostCSSで@keyframesの再利用や変数管理を行い、コードの保守性を高めることも重要です。
また、開発ツールのプレビュー機能を活用して細かく調整しましょう。

document.addEventListener('DOMContentLoaded', () => {
	...
});

ページの読み込みが完了してから処理を始めるための設定です。 HTMLの読み込みが終わる前にJavaScriptが実行されると、取得したい要素がまだ存在しない可能性があるので、それを防いでいます。

const BASIC_INPUT_IDS = [ 'animationName', 'duration', 'delay', 'iterationCount', 'timingFunction', 'direction', 'fillMode' ];

ここではアニメーション設定に関する複数の入力欄のIDをひとまとめにしています。 あとで同じような処理を一括で適用したいため、ループ処理に使えるよう配列にしてあります。

function updateCSS() {
	const animationValue = `${animationName} ${duration}s ${timingFunction}${delayPart} ${iterationCount} ${direction} ${fillMode}`;
	...
}

この関数は入力された値をもとにCSSのanimationプロパティを自動生成します。 CSSでアニメーションを書くときの書式に合わせて、各パーツを組み合わせて1行にまとめています。

if (hasKeyframes) {
	code += `@keyframes ${animationName} {\n${keyframeBody}\n}`;
}

ユーザーがキーフレームを入力していれば、それもCSSの中に追加します。 手書きでキーフレームを書くのは面倒なので、このツールでは自動的に整形されたコードとして出力されます。

function injectPreview(name, body, hasKeyframes, opts) {
	...
	style.textContent = `
	.animated-element.playing {
	animation:
	...
	}
	@keyframes ... {
		...
	}`
	...
}

ここでは、生成されたアニメーションCSSを実際に動かすために、<style>タグを動的に作ってページに追加しています。 ユーザーが入力したアニメーションをその場でプレビューできる仕組みです。

function playAnimation() {
	animatedElement.classList.remove('playing');
	void animatedElement.offsetWidth;
	animatedElement.classList.add('playing');
}

何度も同じアニメーションを再生できるように、いったんクラスを外してから再び付け直しています。このリフロー（強制再計算）をはさむことで、アニメーションの再実行が保証されます。

BASIC_INPUT_IDS.forEach(id => {
	document.getElementById(id).addEventListener('input', updateCSS);
});

アニメーションの設定を変更するたびに、CSSをリアルタイムで再生成して画面に反映します。 これにより、入力内容に応じたCSSが常に正確に表示されるようになります。

updateCSS();

ページを開いた直後に、一度CSSを自動生成して表示しておくための呼び出しです。 初期状態でもサンプルとしてCSSが表示され、使い方がすぐに分かるようになっています。