検索

ホームページ  >  記事  >  ウェブフロントエンド  >  CSS キーフレーム アニメーションの終了角度を動的に制御するにはどうすればよいですか?

CSS キーフレーム アニメーションの終了角度を動的に制御するにはどうすればよいですか?

Linda Hamilton
Linda Hamiltonオリジナル
2024-11-12 14:19:01577ブラウズ

How Can I Dynamically Control the Ending Angle of CSS Keyframe Animations?

動的 CSS @-Keyframe アニメーションの作成

Web 開発では、要素を特定の角度に回転するアニメーションを作成する必要が生じる場合があります。ネイティブ JavaScript ローテーション手法は、CPU に負荷がかかる可能性があります。 CSS アニメーションは効率的な代替手段を提供しますが、停止点を制御するにはキーフレームを動的に定義する必要があります。

問題:

次のシナリオを考えてみましょう: div を回転する必要があります。サーバーから受信した指定角度に設定します。ネイティブ JS のローテーションは、パフォーマンス上の懸念から非現実的です。 CSS アニメーションは解決策を提供しますが、アニメーションの終了角度を決定するキーフレームを動的に作成する必要があります。

解決策:

HTML ヘッド タグにスタイルシート ルールを動的に挿入します。以前のスタイルをオーバーライドします。これにより、外部ライブラリを必要とせずに柔軟性が得られます。次の手順を実行します。

  1. 新しい