CSS遷移で現実的なモーションブラーを作成する方法

CSSに現実的なモーションブラー効果を作成するには、モーションブラー自体の根底にある原則を理解することが含まれます。この効果は、速い動きのオブジェクトや不安定なカメラショットの写真によく見られることは、カメラのシャッタースピードが時間の経過とともに動きをキャプチャする結果です。

モーションブラーの理解

カメラのシャッターが開き、光がフィルム（またはセンサー）を露出させることができます。この露出中にオブジェクトが移動する場合、結果の画像はオブジェクトのパスをぼやけとして示します。このぼかしは、シャッターのオープンタイム中のさまざまなポイントでのオブジェクトの位置の複合です。オブジェクトは半透明で、背景の一部がそれを通して見えるように見えます。

コンピューターは、オブジェクトの複数のサブフレームをそのパスに沿ってわずかに異なる位置に作成し、それらを不透明度の低下とブレンドすることにより、これをシミュレートします。使用されるサブフレームが多いほど、より現実的です。

CSS実装

これをCSSで達成するために、それぞれが不透明度が低下し、アニメーションがわずかに遅れた複数のほぼ同一の要素を利用します。

たとえば、ホバーで移動する黒いドットから始めましょう。（このセクションには、単一のドットアニメーションの最初のCSSコードが含まれます）。

モーションブラーを作成するために、絶対的な位置付けを使用してこのドット（たとえば、20コピー）を複数回複製し、完全に重複します。各コピーの不透明度は減少し（例：10％に）、 transition-delayを使用してアニメーションにわずかな遅延が追加されます。この遅延は、後続のコピーごとに段階的に増加し、モーションブラーの幻想が生じます。 （このセクションには、遅延を備えた複数のドットアニメーションのCSSコードが含まれます）。

コピーの数、不透明度、遅延値は、アニメーション速度と望ましいぼやけた強度に応じて調整する必要があります。多くの場合、20コピーで十分ですが、より遅いアニメーションで機能する場合があります。実験は、最適な効果を達成するための鍵です。

この手法は、CSSアニメーションに専門的なタッチを付与する、さまざまなアニメーション（カラーの変更、スケーリング、複雑なタイミング）のモーションブラーを効果的にシミュレートします。将来のブラウザの進歩は、ネイティブモーションブラー機能を提供する可能性がありますが、この方法は堅牢で容易に利用可能なソリューションを提供します。

以上がCSS遷移で現実的なモーションブラーを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。