クリックした画像が飛び跳ねて停止する展開を作成してみました。
ルート階層の中に・・・
picフォルダー（image.png）
という構造です。
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>繰り返して飛び跳ねる画像</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: skyblue;
}
/* .jumping-imageクラスで画像の初期スタイルを設定 */
.jumping-image {
width: 300px;
cursor: pointer;
}
/* @keyframesでjumpアニメーションを定義。
このアニメーションは、画像を上下に移動し、
元の位置に戻るという動作を行う。 */
@keyframes jump {
0% { transform: translateY(0); }
50% { transform: translateY(-100px); }
100% { transform: translateY(0); }
}
/* .jumping-image.jumpingクラスで、
jumpアニメーションをinfinite（無限ループ）で適用。 */
.jumping-image.jumping {
animation: jump 0.6s ease infinite;
}
</style>
</head>
<body>
<img src="pic/image.png" alt="Click to jump"
class="jumping-image" id="image">
<script>
const image = document.getElementById('image');
let isJumping = false;
//画像クリックで、
//アニメーションを開始・停止するためにjumpingクラスを実行。
//isJumping変数で、画像が現在ジャンプ中かどうかを管理。
image.addEventListener('click', function() {
if (isJumping) {
this.classList.remove('jumping');
} else {
this.classList.add('jumping');
}
isJumping = !isJumping;
});
</script>
</body>
</html>
<!-- index.html -->
実際にクリック〜飛び跳ねる、停止の展開
