「@-Keyframes」を使用して CSS アニメーションを動的に作成する方法

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

CSS アニメーションの動的カスタマイズを実現するには、スタイルシート ルールを作成して挿入します。飛ぶ。この方法により、既存のスタイルをオーバーライドし、受け取った値に基づいてアニメーション エンドポイントを制御できます。

解決策:

1. スタイルを作成する要素:

   var style = document.createElement('style');
   style.type = 'text/css';

2. キーフレーム定義の構築:

   var keyFrames = '\
   @-webkit-keyframes spinIt {\
       100% {\
           -webkit-transform: rotate(A_DYNAMIC_VALUE);\
       }\
   }\
   @-moz-keyframes spinIt {\
       100% {\
           -webkit-transform: rotate(A_DYNAMIC_VALUE);\
       }\
   }';

3. 置換希望のプレースホルダー角度:

   style.innerHTML = keyFrames.replace(/A_DYNAMIC_VALUE/g, "180deg");

4. ドキュメントの見出しにスタイルを挿入します:

   document.getElementsByTagName('head')[0].appendChild(style);

これ指定された回転角度で CSS アニメーションを動的に作成して適用します。サーバーが提供する値に基づいて回転するように、必要に応じて A_DYNAMIC_VALUE プレースホルダーを調整できます。

この手法を利用すると、大量の CPU リソースを消費する可能性のあるネイティブ JS アニメーションを回避してパフォーマンスを最適化できます。スタイルシート ルールを動的に作成すると、その場でアニメーションをカスタマイズできる柔軟性が得られ、外部ライブラリを追加しなくてもユーザー エクスペリエンスが向上します。

以上が「@-Keyframes」を使用して CSS アニメーションを動的に作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。