HTML要素の背景色をアニメーションで変化させる

HTML要素の背景色を変化させるアニメーション

HTML要素の背景色はCSSのときはbackground-colorプロパティやbackgroundプロパティを使って設定しますが、JavaScriptのWeb Animations APIでもこれらのプロパティを使って背景色を指定したアニメーションを実装することができます。

以下の例はarticle要素に対してbackground-colorプロパティを適用するアニメーションを実装しています。
background-colorプロパティをbackgroundプロパティに置き換えても同じことができます。

サンプルページはこちら

HTML コード例

<article id="content1">
  <h1>JavaScriptレシピ</h1>
  <a id="btn_start" class="btn" href="#">アニメーション開始</a>
</article>

CSS コード例

article {
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
  background-color: #5face7;
}

h1 {
  margin: 0 0 20px;
  padding: 0;
  font-size: 100%;
}

a.btn {
  display: inline-block;
  padding: 10px 20px;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  background-color: #4a93cb;
}

JavaScript コード例

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

  // (1) HTML要素を取得
  const btn_start = document.getElementById('btn_start');
  const content1 = document.getElementById('content1');

  // (2) KeyframeEffectオブジェクトのインスタンス作成
  let keyframeeffect = new KeyframeEffect(
    content1,
     [
      {
        backgroundColor: '#5face7',
        offset: 0,
        easing: 'ease'
      },
      {
        backgroundColor: '#ecee49',
        offset: 0.25,
        easing: 'ease'
      },
      {
        backgroundColor: '#70ee49',
        offset: 0.5,
        easing: 'ease'
      },
      {
        backgroundColor: '#49e0ee',
        offset: 0.75,
        easing: 'ease'
      },
      {
        backgroundColor: '#5face7',
        offset: 1
      }
    ],
    {
      duration: 2000,
      direction: 'alternate',
      iterations: 2
    }
  );

  // (3) Animationオブジェクトのインスタンス作成
  let animation = new Animation(keyframeeffect);

  // (4) ボタンが押されたらアニメーション再生
  btn_start.addEventListener('click', function(e){
    e.preventDefault();
    animation.play();
  });
});

アニメーションは5つの状態を設定しています。

このアニメーションを実行すると、2秒間（2000ミリ秒）の間にarticle要素の背景色が青（#5face7）、黄色（#ecee49）、緑（#70ee49）、水色（#49e0ee）、そして最初の青（#5face7）へと変化していきます。

KeyframeEffectオブジェクトに指定するプロパティ名について、「background」や「opacity」のように単語が1つのときはそのまま指定することができます。
しかし、今回の「background-color」や「padding-top」のような2つ以上の単語がある場合は「backgroundColor」や「paddingTop」のように間の「-」を取って2つ目以降の単語の頭文字を大文字にするキャメルケース (ローワーキャメルケース)形式で指定する必要があります。