Dynamically creating CSS keyframe animation via JavaScript

Question

I know this is a messy way of trying to pull this off but perhaps it can be done... What syntax is appropriate for assigning keyframe CSS animation dynamically through JavaScript?

var cue = document.createElement('div');
cue.setAttribute('id', 'cue');
cue.setAttribute(
    'style',
    'opacity:' + '0;'
);

var cueAnimation = document.createElement('style');
cueAnimation.type = 'text/css';
var rules = document.createTextNode('@-moz-keyframes pop {'+
    '0% { opacity:0; }'+
    '50% { opacity:1; }'+
    '100% { opacity:0; }'+
    '}');
cueAnimation.appendChild(rules);
cue.appendChild(cueAnimation);

appContainer.appendChild(cue);

...

cue.style.mozAnimationName = 'pop 2s'; //not sure how to trigger this...

note, I'm only aiming for Firefox in this demo, also content of the 'cue' div has been omitted for simplicity

Try adding `cueAnimation` not to `cue` but to the `head` element, as demonstrated [here](https://stackoverflow.com/questions/1720320/how-to-dynamically-create-css-class-in-javascript-and-apply). — Ruud Helderman, Apr 26 '20 at 09:13

score 1 · Accepted Answer · answered Apr 26 '20 at 12:31

First, get rid of these moz prefixes everywhere, Firefox supports unprefixed animation since years, so do every browsers. (besides, it's style.MozXXX)

Then, style.animationName should be the animation's name (yes), and your animation is called "pop", not "pop 2s".

2s would be a valid value for style.animationDuration:

var cue = document.createElement('div');
cue.setAttribute('id', 'cue');
cue.setAttribute(
    'style',
    'opacity:' + '0;'
);
cue.textContent = "hello";

var cueAnimation = document.createElement('style');
cueAnimation.type = 'text/css';
var rules = document.createTextNode('@keyframes pop {'+
    '0% { opacity:0; }'+
    '50% { opacity:1; }'+
    '100% { opacity:0; }'+
    '}');
cueAnimation.appendChild(rules);
cue.appendChild(cueAnimation);

appContainer.appendChild(cue);

cue.style.animationName = 'pop';
cue.style.animationDuration = '2s';

<div id="appContainer"></div>

pop 2s looks more like the shorthand animation property:

var cue = document.createElement('div');
cue.setAttribute('id', 'cue');
cue.setAttribute(
    'style',
    'opacity:' + '0;'
);
cue.textContent = "hello";

var cueAnimation = document.createElement('style');
cueAnimation.type = 'text/css';
var rules = document.createTextNode('@keyframes pop {'+
    '0% { opacity:0; }'+
    '50% { opacity:1; }'+
    '100% { opacity:0; }'+
    '}');
cueAnimation.appendChild(rules);
cue.appendChild(cueAnimation);

appContainer.appendChild(cue);

cue.style.animation = 'pop 2s';

<div id="appContainer"></div>

But I can't help to note that if you are on the way to write dynamic stylesheets, it makes very little sense to set your element's inline styles; rather set these styles inside your stylesheet too:

var cue = document.createElement('div');
cue.setAttribute('id', 'cue');
cue.textContent = "hello";

var cueAnimation = document.createElement('style');
cueAnimation.type = 'text/css';
var rules = document.createTextNode( '' +
'#cue {' +
'  opacity: 0;'+
'  animation: pop 2s infinite;'+
'}' +
'@keyframes pop {'+
'  0% { opacity:0; }'+
'  50% { opacity:1; }'+
'  100% { opacity:0; }'+
'}');
cueAnimation.appendChild(rules);
cue.appendChild(cueAnimation);
appContainer.appendChild(cue);

<div id="appContainer"></div>

Excellent! Thank you so much :) – Pawel Apr 26 '20 at 19:09 — Pawel, Apr 26 '20 at 19:09

Dynamically creating CSS keyframe animation via JavaScript

1 Answers1