Javascript - setInterval, animation, delay

Question

我知道我可以在CSS中使用动画和@keyframes，但我想在下面解决这个问题。我想暂停这个动画以后使用clearInterval (<-但这不是我的问题)。

问题是，这个动画在一秒后开始。如何使动画在刷新页面后立即工作?(- 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);

EDIT:不，它不是一个副本。我想马上有动画的第一步

Answer 1

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

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();