javascript - スタイルが割り当てられた JavaScript インスタント CSS アニメーション

Question

私の問題は、JavaScript を使用して単純な CSS アニメーションを実行したいということです。私が知っている解決策はすでにありますが、プロセスを簡素化する方法を見つけようとしています。

例：

<span id="span">Hello World</span>
<script>
var span;
goRed();
function goRed()
{
    span = document.getElementById("span");
    span.setAttribute("style", "-webkit-transition-duration:1s");
    span.style.color = "red";
}
</script>

この例を実行すると、Hello World が即座に赤くなります。

これまでのところ、関数 goRed() で次のことを行うことで、この問題を解決しました。

window.setTimeout('span.style.color = "red";', 0);

色の遅れた変更が機能します。

単純な CSS アニメーションを実行する API を作成したいので、前にスタイルシートで transition-duration を割り当てることはしたくありません。

これを行うためのよりエレガントな方法はありますか？

前もって感謝します