CSSを使用したクリック時のアニメーションの実装方法

CSSトランジションを使用する方法:

CSSトランジションは要素のスタイルを滑らかに変化させるための効果的な方法です。以下の例では、ボックスがクリックされたときに背景色が変化するアニメーションを実装します。

<html>
<head>
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: background-color 0.3s ease;
}
.box:hover {
  background-color: blue;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

CSSアニメーションを使用する方法:

CSSアニメーションを使用すると、要素に対して詳細なアニメーションを作成できます。以下の例では、ボックスがクリックされたときに回転するアニメーションを実装します。

<html>
<head>
<style>
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
}
.box.clicked {
  animation: rotate 1s infinite;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
  document.querySelector('.box').addEventListener('click', function() {
    this.classList.toggle('clicked');
  });
</script>
</body>
</html>

これらはいくつかの基本的な方法ですが、実際にはCSSのプロパティやアニメーションの組み合わせによってさまざまなエフェクトを作成することができます。詳細な実装については、CSSのドキュメンテーションやチュートリアルを参照してください。