このonclickアニメーションをonloadアニメーションに変換するにはどうすればよいですか？

Question

私はこれを分解していますJS FIDDLEボタンをクリックするとコインをランダムな面に反転します。私はクリックしてアニメーションを再生するのではなく、そうしようとしています。アニメーションは負荷をかけて再生されます。 30秒ごとに繰り返します。

私は、これは正しくはどのように行われている？

... $(document).ready(function(){ });で関数をラップし、ボタンのクリックを削除し、 rotate()で関数名を置き換えてみましたかどんな助けでも大歓迎です。

var deg = [0, 0, 0, 0]; 
 

 
rotate = function() { 
 
    for (var i = 0; i < 4; ++i) { 
 
    deg[i] += 180 * 4; 
 
    if (Math.random() > 0.5) 
 
     deg[i] += 180; 
 
    $('#flip' + i).css({ 
 
     '-webkit-transform': 'rotateY(' + deg[i] + 'deg)', 
 
     '-o-transform': 'rotateY(' + deg[i] + 'deg)', 
 
     'transform': 'rotateY(' + deg[i] + 'deg)' 
 
    }); 
 
    } 
 
};

body { 
 
    perspective: 800px; 
 
    -webkit-perspective: 800px; 
 
    -o-perspective: 800px; 
 
} 
 

 
.coin { 
 
    background-image: url("http://coins.thefuntimesguide.com/images/blogs/presidential-dollar-coin-reverse-statue-of-liberty-public-domain.png"); 
 
    background-size: 100% 100%; 
 
    border-radius: 100%; 
 
    height: 100px; 
 
    margin: 50px auto; 
 
    position: relative; 
 
    width: 100px; 
 
    -webkit-transition: 2.5s ease-in-out; 
 
    -o-transition: 2.5s ease-in-out; 
 
    transition: 2.5s ease-in-out; 
 
    -webkit-transform-style: preserve-3d; 
 
    -o-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
} 
 

 
.coin:after { 
 
    background-color: #a37131; 
 
    background-image: -webkit-linear-gradient(hsla(0, 0%, 100%, .25), hsla(0, 0%, 0%, .25)); 
 
    bottom: 0; 
 
    content: ''; 
 
    left: 45px; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 5px; 
 
    z-index: -10; 
 
    -webkit-transform: rotateY(-90deg); 
 
    -o-transform: rotateY(-90deg); 
 
    transform: rotateY(-90deg); 
 
    -webkit-transform-origin: 100% 50%; 
 
    -o-transform-origin: 100% 50%; 
 
    transform-origin: 100% 50%; 
 
} 
 

 
.coin:before { 
 
    background-color: #a37131; 
 
    background-image: url("https://www.intnumis.com.au/images/product_gub257zcoy_201310GoldProofHoleyDollarDumpREV_medium.jpg"); 
 
    background-size: 100% 100%; 
 
    border-radius: 100%; 
 
    content: ''; 
 
    height: 100px; 
 
    left: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 100px; 
 
    -webkit-transform: translateZ(-5px); 
 
    -o-transform: translateZ(-5px); 
 
    transform: translateZ(-5px); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="spin" onclick="rotate();">Spin</button> 
 
<span id="flip0" class="coin" style="display:inline-block;"></span>

Answer 1

これはあなただけsetInterval()を使用して30秒ごとに、その後、ページのロード時rotate()を呼び出す必要があります達成するために：それは動作しません

rotate(); 
setInterval(rotate, 30000); 

Updated fiddle