クリックした画像がゆらゆら揺れ・停止させてみました。
ルート階層の中に・・・
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, html {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: lightpink;
}
#wobbleImage {
width: 400px;
cursor: pointer;
display: block;
margin: 0 auto;
transition: transform 0.1s ease-in-out;
}
/* ゆらゆら揺れるアニメーションのキー フレーム */
@keyframes wobble {
0%, 100% {
transform: rotate(0deg);
}
15% {
transform: rotate(20deg);
}
30% {
transform: rotate(-20deg);
}
45% {
transform: rotate(4deg);
}
60% {
transform: rotate(-4deg);
}
75% {
transform: rotate(10deg);
}
90% {
transform: rotate(-10deg);
}
}
/* アニメーションを適用するクラス */
.wobble {
animation: wobble 0.5s ease-in-out infinite;
}
</style>
</head>
<body>
<img id="wobbleImage"
src="pic/image.png" alt="クリックして揺れる画像">
<script>
const image = document.getElementById('wobbleImage');
// 画像をクリックで揺れるアニメーションを開始・停止する
image.addEventListener('click', () => {
image.classList.toggle('wobble');
});
</script>
</body>
</html>
<!-- index.html -->
実際にクリック〜ゆらゆら・停止の流れ（ちょっとキモイ）
