JavaScript を使用して WebKit キーフレームアニメーションの回転値を動的に設定する方法-CSSチュートリアル-php.cn

How to Dynamically Set WebKit Keyframe Animation Rotation Values Using JavaScript?

動的キーフレーム値: CSS での JavaScript 変数の使用

質問:

どうすればよいですかJavaScript を使用して Webkit キーフレームアニメーションの回転値を動的に設定する変数?

答え:

CSS では、JavaScript 変数をキーフレームアニメーションに直接挿入できません。これを実現するには、JavaScript で CSS ルールを作成し、CSS オブジェクトモデル (CSSOM) に挿入する必要があります。

次のサンプルコードを検討してください。

@-webkit-keyframes rotate {
    0% {-webkit-transform: rotate(-10deg);}
    100% {-webkit-transform: rotate(10deg);}
}

#dog{
/*irrelevant settings*/
-webkit-animation: rotate 5s infinite alternate ease-in-out;
}

ログイン後にコピー

回転値を指定するには、JavaScript 関数を記述できます。

// Assume var dogValue = "20deg";
var styleElement = document.createElement('style');
styleElement.type = 'text/css';
var keyframesRule = `@-webkit-keyframes rotate {
    0% {-webkit-transform: rotate(-${dogValue});}
    100% {-webkit-transform: rotate(${dogValue});}
}`;
styleElement.appendChild(document.createTextNode(keyframesRule));
document.head.appendChild(styleElement);

ログイン後にコピー

このコードは、新しい

JavaScript を使用して WebKit キーフレーム アニメーションの回転値を動的に設定する方法

JavaScript を使用して WebKit キーフレームアニメーションの回転値を動的に設定する方法