元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 menu

JavaScriptでアニメーションする方法

この記事では、クラスの追加・削除をすることでアニメーションする方法について書きます。イベントと組み合わせて、インタラクティブなものを作ります。簡単にではありますが、JavaScriptを利用したアニメーションの導入としてご覧ください。

JavaScriptでクラスを追加・削除してアニメーションする

<div id="rect1"></div>
<input type="button" id="btn1" value="回転">
#rect1{
  width:100px;
  height:100px;
  background:#000000;
  transition: all 300ms 0s ease;
}

.active{
  transform: rotate(90deg);
}
let rect1 = document.getElementById('rect1');
let btn1 = document.getElementById('btn1');

btn1.addEventListener('click', function(){
  if(!rect1.classList.contains('active')){
    rect1.classList.add('active');
  }else{
    rect1.classList.remove('active');
  }
});

/* 上記の書き換え
btn1.addEventListener('click', function(){
  rect1.classList.toggle('active');
});
*/

animationを切り分けてJavaScriptで操作する

下準備

まず、animationと@keyframesを利用したアニメーションのコードを用意します。

<div id="rect2"></div>
#rect2{
  width:100px;
  height:100px;
  background:#000000;
  animation: rotation 2s ease 0s 1 alternate none running;
}

@keyframes rotation{
  0%{
    transform:scale(.3);
  }
  50%{
    transform:scale(.6) rotate(-45deg);
    background: red;
  }
  100%{
    transform:scale(1) rotate(180deg);
    background: blue;
  }
}

animationを別クラスに切り分けてJavaScriptから操作する

下準備で用意したコードを以下のように変更します。

  • 回転ボタンを追加する
  • animationプロパティを別クラスに切り分ける
  • JavaScriptからクラスの追加・削除でアニメーションする
<div id="rect2"></div>
<!-- 回転ボタンを追加する -->
<input type="button" id="btn2" value="回転">
#rect2{
  width:100px;
  height:100px;
  background:#000000;
}

/* animationプロパティを別クラスに切り分ける */
.animation1{
  animation: rotation 2s ease 0s 1 alternate none running;
}

@keyframes rotation{
  0%{
    transform:scale(.3);
  }
  50%{
    transform:scale(.6) rotate(-45deg);
    background: red;
  }
  100%{
    transform:scale(1) rotate(180deg);
    background: blue;
  }
}
let rect2 = document.getElementById('rect2');
let btn2 = document.getElementById('btn2');

//クラスの追加・削除
btn2.addEventListener('click', function(){
  rect2.classList.toggle('animation1');
});

まとめ

JavaScriptでアニメーションする方法として、クラスの追加・削除とクリックイベントを組み合わせた例をご紹介しました。イベントを利用するとユーザの任意のタイミングで、アニメーションすることができます。