JavaScript 変数を使用して WebKit キーフレームを制御するにはどうすればよいですか?

JavaScript 変数による Webkit キーフレームの制御

この記事では、JavaScript 変数を使用して Webkit キーフレーム内の値を制御する方法について説明します。 CSS に変数を直接挿入することは実現できませんが、これを実現する代替方法があります。

提供されたシナリオでは、乱数が生成され、キーフレーム内の回転値として適用されることを目的としています。ただし、単に回転値の代わりに変数を配置するだけでは CSS では機能しません。

代わりに、JavaScript を使用してプログラムで CSS ルールを作成し、それを CSS オブジェクト モデル (CSSOM) に挿入することが解決策となります。 1 つのアプローチは、生成された変数に基づいて新しいキーフレームで既存のアニメーションを上書きすることです。

JSFiddle の例は、この手法を示しています。最初は -10 ～ 10 度の回転アニメーションを実行しますが、ユーザーはボタンをクリックすると -360 ～ 360 度の間でランダムな回転値を生成できます。

この例では、キーフレームをシームレスに上書きする Simon Hausmann の以前の実験を活用しています。 Chrome や Safari などの最新のブラウザ。ただし、乱数生成機能はAdmixwebから借用しています。

以上がJavaScript 変数を使用して WebKit キーフレームを制御するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。