動的 CSS @-Keyframe アニメーションの作成
Web 開発では、要素を特定の角度に回転するアニメーションを作成する必要が生じる場合があります。ネイティブ JavaScript ローテーション手法は、CPU に負荷がかかる可能性があります。 CSS アニメーションは効率的な代替手段を提供しますが、停止点を制御するにはキーフレームを動的に定義する必要があります。
問題:
次のシナリオを考えてみましょう: div を回転する必要があります。サーバーから受信した指定角度に設定します。ネイティブ JS のローテーションは、パフォーマンス上の懸念から非現実的です。 CSS アニメーションは解決策を提供しますが、アニメーションの終了角度を決定するキーフレームを動的に作成する必要があります。
解決策:
HTML ヘッド タグにスタイルシート ルールを動的に挿入します。以前のスタイルをオーバーライドします。これにより、外部ライブラリを必要とせずに柔軟性が得られます。次の手順を実行します。
