Javascript - setInterval，动画，延迟

Question

我知道我可以在CSS中使用动画和 @keyframes ，但我想在下面解决此问题。我想稍后使用 clearInterval 暂停此动画（＆lt; - 但这不是我的问题）。

问题是，这个动画在一秒钟后开始。刷新页面后，如何立即使动画工作？的 (- JSFIDDLE -)

<div id="myID"></div>
-----------------------
var i = 0;
var thesquare = document.getElementById('myID');
function FunRotate()
{
    switch(i)
    {
        case 0:
        thesquare.style.transform = 'rotate(20deg)';
        i++;
        break;

        default:
        thesquare.style.transform = 'rotate(-20deg)';
        i=0;
        break;
    }
}
setInterval(FunRotate, 1000);

编辑：不，它不是重复的。我希望立即实现动画的第一步。

Answer 1

在FunRotate(); ...

之前添加setInterval(FunRotate, 1000);一次

Answer 2

立即调用它，并在通话结束时为下一个设置timeOut：

function FunRotate()
{
    switch(i)
    {
    case 0:
    thesquare.style.transform = 'rotate(20deg)';
    i++;
    break;

    default:
    thesquare.style.transform = 'rotate(-20deg)';
    i=0;
    break;

    setTimeout(FunRotate, 1000);
}

FunRotate();