CSSアニメーションを使用したonclickイベントの実装方法

CSSのkeyframesを使用したアニメーション CSSのkeyframesを使用すると、要素に対して複数のステップを指定することができます。以下は、要素をクリックした際にフェードインするアニメーションを実装する例です。

HTML:

<div id="box" onclick="this.classList.toggle('fade-in')"></div>

CSS:

@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.fade-in {
  animation: fade-in 1s forwards;
}

JavaScriptを使用したアニメーションのトリガー JavaScriptを使用してonclickイベントをハンドリングし、アニメーションをトリガーすることもできます。以下は、要素をクリックした際に要素の位置を移動するアニメーションを実装する例です。

HTML:

<div id="box" onclick="moveElement()"></div>

CSS:

#box {
  position: relative;
  left: 0;
  transition: left 1s;
}
.move {
  left: 100px;
}

JavaScript:

function moveElement() {
  var box = document.getElementById('box');
  box.classList.add('move');
}

CSSライブラリの使用さらに、CSSアニメーションを簡単に実装するためのライブラリも利用できます。一例として、Animate.cssというライブラリを使用したアニメーション実装方法を紹介します。

HTML:

<div id="box" onclick="this.classList.add('animated', 'bounce')"></div>

CSS:

@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css');
#box {
  width: 100px;
  height: 100px;
  background-color: red;
}
.animated {
  animation-duration: 1s;
}

上記の方法はいくつかの例ですが、CSSアニメーションをonclickイベントに組み合わせるための基本的な手法を示しています。これらのコード例を参考にしながら、独自のアニメーションを作成してみてください。