CSSアニメーションをJavaScriptで制御する：実践的なテクニック
ウェブアニメーション開発では、開発者はアニメーションの要件に応じて、CSSとJavaScriptのどちらの技術を選択し、最適な表現効果とパフォーマンスを達成するかを検討する必要があります。
ウェブデザイナーの中には、CSSアニメーションはJavaScriptアニメーションよりも習得が難しいと考える人もいます。CSSアニメーションにはいくつかの制限がありますが、ほとんどの場合、その能力は私たちの想像をはるかに超えており、通常はより優れたパフォーマンスを提供します。
少量のJavaScriptを組み合わせることで、CSSアニメーションとトランジション効果は、ハードウェアアクセラレーションされたアニメーションとインタラクションをより効率的に実現でき、ほとんどのJavaScriptライブラリよりも優れたパフォーマンスを発揮します。早速本題に入りましょう！
今すぐ探求！
CSSトランジション効果の精密な制御
コーディングフォーラムでは、要素のトランジション効果のトリガーと一時停止に関する問題が絶えません。実際、JavaScriptを使えばこの問題を非常に簡単に解決できます。
要素のトランジション効果をトリガーするには、その要素でトランジションを開始するCSSクラス名を切り替えるだけで十分です。
要素のトランジション効果を一時停止するには、一時停止したい正確なタイミングで、getComputedStyleとgetPropertyValueを使用して現在の計算スタイルを取得します。その後、これらのCSSプロパティ値をその要素に再度設定することで、一時停止を実現できます。
CSS「コールバック関数」でインタラクションを強化
CSSトランジションやアニメーションを操作するための、最も実用的でありながらあまり知られていないJavaScriptのヒントの1つは、それらがトリガーするDOMイベントです。例えば、アニメーションのanimationend、animationstart、animationiterationイベント、およびトランジションのtransitionendイベントです。その役割は推測できるかもしれません。これらのアニメーションイベントは、要素のアニメーション終了時、開始時、または1回のイテレーション完了時にそれぞれトリガーされます。
現時点では、これらのイベントにはベンダープレフィックスが必要です。この例では、Craig Bucklerが開発したPrefixedEvent関数を使用しています。この関数は、element、type、callbackの3つのパラメータを持ち、これらのイベントのクロスブラウザ互換性を実現するのに役立ちます。彼のJavaScriptを使用したCSSアニメーションのキャプチャに関する実用的な記事はこちらです。どの（名前の）アニメーションによってイベントがトリガーされたかを判断する方法に関する別の記事もあります。
CSSトランジション制御の詳細分析
先ほど学んだように、要素を監視し、animationStart、animationIteration、animationEndといったアニメーション関連イベントに応答できます。しかし、アニメーション中にCSSアニメーションを変更したい場合はどうでしょうか？これにはいくつかの巧妙なテクニックが必要です！
animation-play-state属性：アニメーション再生状態
CSSのanimation-play-state属性は、アニメーションを単純に一時停止し、後で再開したい場合に非常に役立ちます。JavaScriptを使用してこのCSSを変更できます（プレフィックスに注意してください）：
要素.スタイル.アニメーションの再生状況を管理します。 = 「一時停止」;
要素.スタイル.アニメーションの再生進行を制御します。 = 「実行中」;
アニメーションキーフレームのパーセンテージ進捗を取得する方法
残念ながら、現時点ではCSSキーフレームアニメーションの正確な現在の「完了率」を取得する方法はありません。 最も効率的な近似方法は、setInterval関数を使用することです。 アニメーション中に100回繰り返されるため、本質的にはアニメーションのミリ秒単位の期間 / 100となります。例えば、アニメーションが4秒間続く場合、setIntervalは40ミリ秒（4000/100）ごとに実行する必要があります。
パーセント表示変数 = ウィンドウ.間隔設定(関数() {
もし (現在のパーセンテージ < 100) {
現在のパーセンテージ += 1;
} そうでなければ {
現在のパーセンテージ = 0;
}
// Updates a div that displays the current percent
結果.内部HTML = 現在のパーセンテージ;
}, 40);
戦略的思考によるアニメーションフローの最適化
コーディングを始める前に、トランジションまたはアニメーションの実行方法を考え、計画することが、問題の最小化と望む結果の達成のために最善の方法です。これは、後でオンラインで解決策を探すよりも優れています！この記事で概説されているヒントやコツは、常にプロジェクトに必要なアニメーションを作成するための最良の方法であるとは限りません。
ここでは、HTMLとCSSの巧妙な使用だけで、本来JavaScriptが必要だと思っていた問題を解決できる簡単な例を紹介します。
結論：動的ウェブページの鍵を握る
- 過去には、開発者はCSSとJavaScriptのどちらかを選択する必要がありました。
- JavaScriptでは、CSSトランジションはCSSアニメーションよりも操作や管理が容易な場合が多いです。
- CSSマトリックスは、初心者にとっては通常、非常に複雑で扱いにくいものです。
- 実行すべき作業内容を考え、効果的な実行方法を計画します。