Add new @keyframes animation to css

Question

I can not add a new animation to css. Do you know what the solution can be?

var val = "@keyframes animation{0%{color:red;}100%{color:blue;}}";
var styleAnim = document.styleSheets[0];
styleAnim.insertRule(val, document.styleSheets[0].cssRules.length);
//Error:
Uncaught DOMException: Failed to execute 'insertRule' on 'CSSStyleSheet': Failed to parse the rule '@keyframes animation{0%{color:red;}100%{color:blue;}}'

Please post the complete @keyframes rule.

Joulss
– Joulss

2017-11-29 22:54:32 +00:00
Commented Nov 29, 2017 at 22:54 — Joulss
– Joulss, Commented Nov 29, 2017 at 22:54
@Joulss try to see now

Helpme
– Helpme

2017-11-29 22:58:49 +00:00
Commented Nov 29, 2017 at 22:58 — Helpme
– Helpme, Commented Nov 29, 2017 at 22:58
Weird, I tried and it works... See jsfiddle.net/ta10wx9a/2

Joulss
– Joulss

2017-11-29 23:37:06 +00:00
Commented Nov 29, 2017 at 23:37 — Joulss
– Joulss, Commented Nov 29, 2017 at 23:37

entio · Accepted Answer · 2017-11-29 23:42:54Z

3

You cant just update the rule (of animation keyframes) apparently. You need to remove it first and then add a new one. See fiddle: https://jsfiddle.net/Lmj7y5vm/2/

Assuming keyframes is the last rule in your stylesheet, and that you have it written in stylesheet with index 1 (that setting works for jsFiddle):

document.styleSheets[1].deleteRule(document.styleSheets[1].cssRules.length-1);
document.styleSheets[1].insertRule(newRule, document.styleSheets[1].cssRules.length-1);

Try clicking the paragraph.

answered Nov 29, 2017 at 23:42

entio

4,3442 gold badges29 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Add new @keyframes animation to css

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related