Wie kann ich WebKit-Keyframes mit JavaScript-Variablen steuern?

Webkit-Keyframes mit Javascript-Variablen steuern

Dieser Artikel befasst sich mit einer Abfrage zur Verwendung von JavaScript-Variablen zur Steuerung von Werten in Webkit-Keyframes. Obwohl das direkte Einfügen von Variablen in CSS nicht möglich ist, gibt es alternative Methoden, um dies zu erreichen.

Im bereitgestellten Szenario werden Zufallszahlen generiert und sollen als Rotationswerte innerhalb der Keyframes angewendet werden. Allerdings wird es in CSS nicht funktionieren, einfach die Variablen anstelle von Rotationswerten zu platzieren.

Stattdessen liegt die Lösung darin, CSS-Regeln programmgesteuert mit JavaScript zu erstellen und sie in das CSS Object Model (CSSOM) einzufügen. Ein Ansatz besteht darin, eine vorhandene Animation mit neuen Keyframes basierend auf den generierten Variablen zu überschreiben.

Ein JSFiddle-Beispiel demonstriert diese Technik. Zunächst wird eine Rotationsanimation von -10 bis 10 Grad ausgeführt, der Benutzer kann jedoch durch Klicken auf eine Schaltfläche zufällige Rotationswerte zwischen -360 und 360 Grad generieren.

Dieses Beispiel nutzt Simon Hausmanns frühere Experimente mit dem nahtlosen Überschreiben von Keyframes moderne Browser wie Chrome und Safari. Die Funktion zur Zufallszahlengenerierung ist jedoch von Admixweb entlehnt.

Das obige ist der detaillierte Inhalt vonWie kann ich WebKit-Keyframes mit JavaScript-Variablen steuern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!