CSSアニメーションを設定する

CSSプロパティを動的にセットしてアニメーションを発生させる

CSSはtransitionプロパティやanimationプロパティを使うとアニメーションを設定することができます。
今回はこの2つのCSSプロパティをJavaScriptから動的に設定することで、指定したタイミングでアニメーションが実行されるようにする方法を解説していきます。

具体的には、setIntervalメソッドを使ってアニメーション開始までの時間を制御し、時間が来たら対象のHTML要素にclass属性を追加することでアニメーションを実行します。
サンプルページはこちら

以下の例は、ページ読み込み完了から5秒後にボタンの背景色（background-colorプロパティ）に対してアニメーションを実行します。

HTML コード例

<article>
  <h1>JavaScriptレシピ</h1>
  <p id="text">ボタンのアニメーション開始まであと <span>5</span>秒</p>
  <a id="btn_sample" class="btn" href="#">サンプルボタン</a>
</article>

CSS コード例

a.btn {
  display: inline-block;
  padding: 10px 20px;
  color: #fff; 
  text-decoration: none;
  border-radius: 5px;
  background-color: #4a93cb;
  transition-property: background-color;
  transition-duration: .5s;
  transition-timing-function: ease;
}
a.btn_effect {
  background-color: #a1cef1;
}

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

  let count = 5;
  let interval_id = null;
  const text = document.querySelector("#text span");
  const btn = document.getElementById("btn_sample");

  interval_id = setInterval( () => {

    if( 0 < count ) {
      count--;
    } else {
      btn.classList.add('btn_effect');
      clearInterval(interval_id);
    }

    text.textContent = count;
  }, 1000);

  btn.addEventListener("transitionend", function(){
    btn.classList.remove('btn_effect');
  });
});

CSSでtransitionプロパティをあらかじめ用意しておきます。
実行するアニメーションについては全てCSSから設定するため、JavaScriptではどのタイミングで実行するかだけを制御します。

ページの読み込み完了後にsetIntervalメソッドを実行して、5秒後にid属性「btn_sample」のボタンへclassList.addメソッドを使ってclass属性にクラス名「btn_effect」を追加します。
class属性が追加されるとtransition-propertyプロパティで設定しているbackground-colorプロパティを対象にした背景色のアニメーションが実行されます。

さらにtransitionプロパティによるアニメーションが終了したタイミングでイベント「transitionend」を検出して、今度はclassList.removeメソッドを使って先ほど追加したクラス名「btn_effect」を削除します。
クラス名を削除するとbackground-colorプロパティの値が最初の状態に戻るため、ここでまた改めてアニメーションが発生します。
ここまでの2回のアニメーションによって、ボタンが光って戻るようなエフィクトを付けます。

animationプロパティを使ったアニメーションを動的に設定する

続いてanimationプロパティによるアニメーションを指定したタイミングで実行していきます。

以下の例は、HTMLは先ほどと全く同じです。
CSSについてはanimationプロパティに関する記載に変更しています。

animationプロパティによるアニメーションが終了したタイミングは「animationend」が発生しまするため、JavaScriptのコードはイベントリスナーに登録するイベントを「animationend」に変更します。

HTML コード例

<article>
  <h1>JavaScriptレシピ</h1>
  <p id="text">ボタンのアニメーション開始まであと <span>5</span>秒</p>
  <a id="btn_sample" class="btn" href="#">サンプルボタン</a>
</article>

CSS コード例

a.btn {
  display: inline-block;
  padding: 10px 20px;
  color: #fff; 
  text-decoration: none;
  border-radius: 5px;
  background-color: #4a93cb;
}
a.btn_effect {
  animation: a1 .5s ease 2 alternate;
}
@keyframes a1 {
  0% {background-color: #4a93cb;}
  100% {background-color: #a1cef1;}
}

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

  let count = 5;
  let interval_id = null;
  const text = document.querySelector("#text span");
  const btn = document.getElementById("btn_sample");

  interval_id = setInterval( () => {
  
    if( 0 < count ) {
      count--;
    } else {
      btn.classList.add('btn_effect');
      clearInterval(interval_id);
    }
    text.textContent = count;

  }, 1000);

  btn.addEventListener("animationend", function(){
    btn.classList.remove('btn_effect');
  });
});

実行した内容自体はtransitionプロパティで実行したものとほぼ同じです。
表示確認についてはこちら