HTMLサークル画像が徐々に1分で小さくなる

Question

Webページに大きな円を描こうとすると、徐々に小さくなり、テキストがトリガされ、HTMLで再び大きくなりますが、悲しいことにHTMLはそれほどではありません良い。

私はこのためにループを使用して、それぞれのループを小さくすることができますが、私はそれをどうすればループを正確に60秒実行できるのでしょうか？

誰かが私を正しい方向に向けることができれば、私は非常に感謝しています。

Answer 1

純粋なHTMLを使用することはできないため、javascriptを使用する必要があります。

javascriptでsetInterval関数を使用すると、1秒ごとに関数を実行し、その関数で必要な処理を実行できます。以下のサンプル。

mainFunction(){ 
    setInterval(doSomething, 1000); //here 1000 means 1000ms ie it will run every 1s 
} 

doSomething(){ 
    //here you can change the radius of your circle to make it grow bigger/smaller every 1s 
} 

Answer 2

jQueryを使用することは、あまりよく分からない場合の答えです。作成したいアニメーションを作成する機能があります。 In this pageあなたが必要なすべてを見つけることができますが、私はつもりはあなたが数分以内に何ができるかを見にするために、ここでスニペットを入れています：

var x = 10; 
 
$("#try").on('click', function(){ 
 
    x = 10; 
 
    animate1(); 
 
}); 
 

 
function animate1(){ 
 
    console.log(x); 
 
    if (x > 0){ 
 
    x = x - 1; 
 
    $("#text").html("Small text"); 
 
    $("#text").animate({fontSize: '40'}, 1000, "swing", animate2); 
 
    
 
    } 
 
}; 
 
function animate2(){ 
 
    if (x > 0){ 
 
    x = x - 1; 
 
    $("#text").html("Big text"); 
 
    $("#text").animate({fontSize: '10'}, 1000, "swing", animate1); 
 
    
 
    } 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<div id="text">Small text</div> 
 
<br> 
 
<button id="try">Try this!</button>