CSSアニメーションを自分のVS Codeにコピペしたがアニメーションが1回しかしない。 参考サイトは下記の通り。フルコード（伸びるアニメーション）が下記のサイトに貼ってあってそのままコピペしただけなので意味は分かっていません。下記のサイトでは延々とアニメーションが繰り返されているのですが、自分のVS Codeではサイトを開いた瞬間の1回だけしか再生されません。 https://ics.media/entry/11336/ 一応、コピペしたコードを載せておきます。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <link rel="stylesheet" href="css/common.css"> <style> /* CSSアニメーションの設定 */ .purun { -webkit-animation: purun 0.8s linear 0s 1; animation: purun 0.8s linear 0s 1; } @-webkit-keyframes purun { 0% { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); } 15% { -webkit-transform: scale(0.9, 0.9) translate(0%, 5%); } 30% { -webkit-transform: scale(1.3, 0.8) translate(0%, 10%); } 50% { -webkit-transform: scale(0.8, 1.3) translate(0%, -10%); } 70% { -webkit-transform: scale(1.1, 0.9) translate(0%, 5%); } 100% { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); } } @keyframes purun { 0% { transform: scale(1.0, 1.0) translate(0%, 0%); } 15% { transform: scale(0.9, 0.9) translate(0%, 5%); } 30% { transform: scale(1.3, 0.8) translate(0%, 10%); } 50% { transform: scale(0.8, 1.3) translate(0%, -10%); } 70% { transform: scale(1.1, 0.9) translate(0%, 5%); } 100% { transform: scale(1.0, 1.0) translate(0%, 0%); } } </style> <script src="js/common.js"></script> </head> <body> <div class="shadow"></div> <img id="mitarashi" class="purun" src="images/mitarashi.png" width="200" height="200"> <script> // ID値「mitarashi」に対してCSSアニメ―ション「purun」を600ミリ秒の間隔を空けてループ再生 looopAnimation("mitarashi", "purun", 600); </script> </body> </html> 難しいコードなのでカスタマイズは無理ですが、何で自分のファイルではアニメーションが1回しかしないのか、その理由が知りたいです。コピペミスは何回も確認しました。
HTML、CSS
