jQueryでのアニメーション方法

jQueryでアニメーションを作る方法の紹介です！
まずはデモでjQueryアニメーションを見てみよう。
ボタンを押したらボタンがおっきくなって、もう一度押すと小さくなるボタンです。

初めての目次

デモボタン
keyframeを使ったアニメーションデモ

デモボタン

このデモのソースは以下になります。

HTML

<div class="btn"></div>

CSS

.btn {
  position: relative;
  display: block;
  margin: 40px auto;
  width: 320px;
  height: 64px;
  border-radius: 12px;
  backdrop-filter: blur(4px);
  background: #2b2f37;
  box-shadow: 0 20px 30px -20px rgba(0, 0, 0, 0.7);
  transition: 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform, background;
  cursor: pointer;
}
.btn:after {
  content: "ボタンを大きくする";
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100%;
  margin: 0;
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
}
.btn:hover {
  transform: scale(1.02);
}
.btn.active {
  background: rgba(40, 29, 255, 0.7);
  transform: scale(3);
}
.btn.active:after {
  content: "ボタンを小さくする  ";
}
.btn.active:hover {
  transform: scale(3.06);
}

jQuery

$(".btn").on("click", function() {
  if($(this).hasClass("active")) {
    // .btnに「.active」がついてたら
    $(this).removeClass("active");
  } else {
    // .btnに「.active」が無かったら
    $(this).addClass("active");
  }
});

デモの説明について。
HTMLで書いた「.btn」のdivに、CSSでスタイルを設定しています。
ボタン内のテキストも疑似要素「:after」で指定しています。
さらにCSSでクリック後のスタイルを「.btn.active」で指定しています。

CSSを書き終わったら、jQueryで「.btn」が押されたらの処理を書きます。
「.btn」が押された時に、「.btn」に「.active」の有無で処理を分けます。
「.active」が付いてなかったら「.active」を付けて、無ければ「.active」を外します。

これがjQueryでクラスの付け外しでアニメーションさせる方法です。
こうすることでHTMLに直接スタイルが記入されず、HTMLソースがキレイな状態を保つことができます。

jQueryでは「anime({})」や「css({})」も用意されているので
それでスタイルを上書きすれば同じような動きができますが、汎用性が無く、
もしボタンに他の処理を書く場合、手間がスゴイので出来れば「anime({})」や「css({})」のアニメーションは避けたいです！

以上！jQueryでアニメーションをする方法になります。
このクラスの付け外しでアニメーションする方法は色々できて
CSSの「keyframe」を使うと、さらに表現豊かにアニメーションすることができます。

次のデモはCSS「keyframe」を使った方法です。

keyframeを使ったアニメーションデモ

このデモのソースは以下になります。

HTML

<div class="btn2"></div>

CSS

.btn2 {
  position: relative;
  display: block;
  margin: 40px auto;
  width: 320px;
  height: 64px;
  border-radius: 12px;
  background: #2b2f37;
  box-shadow: 0 20px 30px -20px rgba(0, 0, 0, 0.7);
  transition: 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform, background;
  cursor: pointer;
}
.btn2:after {
  content: "ボタンをブルブルする";
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100%;
  margin: 0;
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
}
.btn2:hover {
  opacity: .8;
}
.btn2.active {
  animation: .01s buru-buru infinite;
}
.btn2.active:after {
  content: "ヤバいヤバい";
}
@keyframes buru-buru {
  0% { transform: translateX(0px); }
  30% { transform: translateX(-3px); }
  70% { transform: translateX(3px); }
  100% { transform: translateX(0px); }
}

jQuery

$(".btn2").on("click", function() {
  if(!$(this).hasClass("active")) {
    // .btnに「.active」が無かったら
    $(this).addClass("active");
  } else {
    // .btnに「.active」がついてたら
    $(this).removeClass("active");
  }
});

デモの説明になります！
HTMLとjQueryは先ほどのデモとはクラス名が違うだけでやっていることは一緒になります。

CSSは「.active」が付くと「animation」が付くようになっています。
「animation」の「keyframe」には、「transform」で横にブルブルしているアニメーションが付くようにしています。

この様に、jQueryでアニメーションする方法は、クラスの付け外しで様々な動きができます。
jQueryでアニメーションするというより、CSSのアニメーションをjQueryでon/off切り替える感じですが
このクラスの付け外しで、思いのアニメーションを作ってみてください！
もし、説明が下手でよくわからない所があったらコメントで教えてください。