How to set CCS animation via javascript?

Question

css

Good afternoon!
I'm trying to write a script that takes words one by one from an array and increments them using css animation making them transparent until they dissolve. Then a new word.
Apparently, since I'm generating div spans via js code, predefined styles don't work on them. But I don’t know how to set css animation through js code. Can you advise?

var height = window.innerHeight;
var width = window.innerWidth;

var arr = ["hello", "privet", "nihao"];
var i = 0;

document.write("<div  style='height:" + height + "px; width:" + width + "px;'><span id='word'></span></div>");

function change_bg() {
    document.getElementById('word').innerHTML = arr[i];
    document.getElementById('word').style.trasition = 'font-size 10em 2s';

    if (i>1) i = 0; else i++;
    }

setInterval(change_bg, 3000);

Answer 1

After setting the animation properties, you need to force a layout reflow.
Ways .
Example .

Answer 2

document.getElementById('word').style.cssText = " transition: font-size: 10em 2s;";