Wie können Sie dynamische CSS @-Keyframe-Animationen erstellen?

Dynamische CSS @-Keyframe-Animationserstellung

Im Bereich der Webentwicklung kann die dynamische Erstellung von CSS @keyframes-Animationen wertvoll sein Werkzeug. Dieser Bedarf entsteht, wenn Sie benutzerdefinierte Animationen mit bestimmten Parametern benötigen, beispielsweise die Möglichkeit, an einer bestimmten Position anzuhalten.

Um dies zu erreichen, können Sie CSS-Stile dynamisch in Ihre Webseite einfügen. Mit dieser Methode können Sie vorhandene Stile überschreiben und die unnötige Belastung durch zusätzliche Bibliotheken vermeiden.

Lösung:

Implementieren Sie den folgenden Code:

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);

Dieses Code-Snippet erstellt einen