サーバー応答に基づいて CSS @-keyframes アニメーションを動的に作成する方法

CSS @-keyframes アニメーションを動的に生成する

シナリオ

div を回転し、サーバーの応答によって決定される特定の位置で停止する必要があります。回転と停止にネイティブ JS を使用すると、過剰な CPU リソースが消費されます。

解決策

回転には CSS アニメーションを利用しますが、停止位置を指定するには動的に定義されたクラスが必要です:

実装

スタイルシート ルールを動的に挿入して以前のスタイルをオーバーライドします:

A_DYNAMIC_VALUE を目的の停止位置 (例: "180deg") に置き換え、スタイル要素を先頭に追加します。アニメーションを動的に適用するためのドキュメント。

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