Как задать анимацию CCS через javascript?

Question

[qo_0p]

Добрый день!
Пытаюсь написать скрипт который берет поочередно слова из массива и увеличивает их с помощью css анимации делая их прозрачными, пока они не растворяются. Затем новое слово.
Видимо так как я генерирую div span через js код, заранее прописанные стили на них не действуют. А как задать анимацию css через js код я не знаю. Может подскажете?

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

[monochromer]

После задания свойств анимации нужно принудительно вызвать перекомпоновку layout.
Способы.
Пример.

Answer 2

[Владимир @]

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