動的 CSS @-Keyframe アニメーションを作成するにはどうすればよいですか?

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

Web 開発の領域では、CSS @keyframes アニメーションの動的作成は貴重な機能となります。道具。このニーズは、特定の位置で停止する機能など、特定のパラメータを備えたカスタム アニメーションが必要な場合に発生します。

これを実現するには、CSS スタイルを Web ページに動的に挿入できます。この方法を使用すると、既存のスタイルをオーバーライドし、追加のライブラリによる不必要な負担を回避できます。

解決策:

次のコードを実装します:

var style = document.createElement('style');
style.type = 'text/css';
var keyFrames = `
@-webkit-keyframes spinIt {
    100% {
        -webkit-transform: rotate(A_DYNAMIC_VALUE);
    }
}
@-moz-keyframes spinIt {
    100% {
        -webkit-transform: rotate(A_DYNAMIC_VALUE);
    }
}
`;
style.innerHTML = keyFrames.replace(/A_DYNAMIC_VALUE/g, "180deg");
document.getElementsByTagName('head')[0].appendChild(style);

このコード スニペットは