Wie kann ich diese Onclick-Animation in eine Onload-Animation verwandeln?

Question

Ich habe diese JS FIDDLE auseinander genommen, wo es eine Münze auf eine zufällige Seite auf einen Knopfklick umdreht. Ich versuche es so zu machen, anstatt die Animation auf Klick zu spielen. Die Animation wird unter Last abgespielt. Und wiederholt sich alle 30 Sekunden.

ich die Funktion in $(document).ready(function(){ }); versuchte Verpackung und auf den Button klicken zu entfernen und die Funktionsnamen mit rotate() ersetzen ...

Wie ist dies richtig gemacht? Jede Hilfe wird sehr geschätzt.

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

Um dies zu erreichen, müssen Sie nur rotate() rufen, wenn die Seite geladen wird, dann alle 30 Sekunden setInterval() mit:

rotate(); 
setInterval(rotate, 30000); 

Updated fiddle