HTMLのアニメーションを組み込もうとしてJqueryでいくつか調べて実施した内容を紹介します。いくつか調べたのですが、うまい具合に見つからなかったので素人ながら自作しました。
https://techfromjapan.estacionsuzuki.com/
動作イメージは、このサイトヘッダーのボタンの動作になります。
タイマーを設置しているので一定間隔でボタンが点灯していきます。
index.html
(略)
<script src="./jquery-3.5.1.js"></script>
(略)
<divclass="category"><divclass="icon timer"><p>A</p></div><divclass="icon timer"><p>B</p></div><divclass="icon timer"><p>C</p></div><divclass="icon timer"><p>D</p></div><divclass="icon timer"><p>E</p></div><divclass="icon timer"><p>F</p></div><divclass="icon timer"><p>G</p></div></div>
(略)
</footer><script src="./script.js"></script><!-- ※Jqueryのファイルです --></body>stylesheet.css
.category{width:100%;height:auto;margin-top:5px;padding-left:0%;padding-right:3%;}.icon{display:inline-block;text-decoration:none;color:black;background-image:linear-gradient(#FAF0E60%,#FF8C00100%);transition:.4s;text-align:center;margin:01px;padding:auto;width:13%;height:50px;}.icon:hover{opacity:0.5;}script.js
// jQuery$(function(){//カテゴリボタンを点滅させるアニメーション//（１）ページの概念・初期ページを設定varpage=0;//（２）イメージの数を最後のページ数として変数化varlastPage=parseInt($(".timer").length-1);//（３）初期ページを表示$(".timer").eq(page).css("opacity","0.5");//（４）ページ切換用functionchangePage(){$(".timer").css("opacity","1");$(".timer").eq(page).css("opacity","0.5");};//（５）～秒間隔でイメージ切換の発火設定varTimer;functionstartTimer(){Timer=setInterval(function(){if(page===lastPage){page=0;changePage();}else{page++;changePage();};},3000);}//（６）～秒間隔でイメージ切換の停止設定functionstopTimer(){clearInterval(Timer);}//（７）タイマースタートstartTimer();// トップページカテゴリのclickイベント$('.icon').click(function(){// 自動アニメーションの停止$('.timer').css('opacity','');stopTimer();});});