Stoppen von CSS -Animationen mit dem geringsten JavaScript -Code [Duplicate] ⇐ HTML

[Anonymous]

Hier war was ich erstellt hatte. < /p>
.wrap { color: black;
animation: anim 1.5s linear 0s infinite normal;
animation-play-state: var(--animStat);
}
@keyframes anim {
from { color: red;}
50% { color: yellow;}
to { color: blue;}
}

style="--animStat: running"
onclick="$(this).style['animStat'] = paused">This is a paragraph.
< /code>
Die Idee ist, dass der Status der Animation, sei es läuft oder gestoppt, von einer Variablen abhängt, die im HTML -Code gespeichert und vom CSS -Code verwendet wird. Durch Klicken auf den Absatz ändert das kleine JavaScript Onclick Snippet die Variable, ohne CSS-Klassen oder andere störende Dinge hinzuzufügen. Das JavaScript Onclick -Ereignis funktioniert jedoch nicht. Warum? Liegt es daran, dass das Ändern der Variablen das Verhalten des CSS -Code nicht dynamisch verändert, oder mein miserabeles Wissen über JavaScript ist erneut geschlagen?