HTML要素に透過エフィクトをつける

HTML要素を透過するアニメーション

HTML要素を透過するときはCSSのopacityプロパティやbackgroundプロパティを使って行いますが、JavaScriptのWeb Animations APIでもこれらのプロパティを使って透過アニメーションを設定することができます。

HTML要素を子孫要素も含めて透過させたいときはopacityプロパティ、子孫要素は透過させずに親要素だけ透過させるときはbackgroundプロパティを使います。

opacityプロパティを使った透過アニメーションのサンプルページはこちら

backgroundプロパティを使った透過アニメーションのサンプルページはこちら

以降はそれぞれのプロパティを使ったアニメーションをWeb Animations APIで実装していきますが、HTMLとCSSは以下の共通のコードを使います。
今回の例ではarticle要素に対して透過エフィクトを適用します。

HTML コード例

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

CSS コード例

article {
  padding: 20px;
  width: 100%;
  height: 150px;
  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;
}

opacityプロパティを使った透過アニメーション

opacityプロパティは適用した要素に加えて子孫要素も透過します。

サンプルページはこちら

以下の例はopacityプロパティを使った透過アニメーションです。

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,
    [
      {
        opacity: 1,
        offset: 0,
        easing: 'ease'
      },
      {
        opacity: 0.2,
        offset: 0.3
      },
      {
        opacity: 0.2,
        offset: 0.7,
        easing: 'ease'
      },
      {
        opacity: 1,
        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();
  });
});

Web Aniamtion APIの設定をページ読み込み完了のタイミングで実行するため、コード全体をイベントリスナー「DOMContentLoaded」の中で実行します。

「(1) HTML要素を取得」では、「アニメーション開始」ボタンとarticle要素をそれぞれid属性から取得します。
ボタンは変数btn_startに、article要素は変数content1に入れておきます。

続いて「(2) KeyframeEffectオブジェクトのインスタンス作成」では、KeyframeEffectオブジェクトのコンストラクタにアニメーションの効果（エフィクト）や再生設定を指定してインスタンスを作成します。
KeyframeEffectオブジェクトのコンストラクタは次の3つのパラメータを指定することができます。

let keyframeeffect = new KeyframeEffect( element, keyframeSet, keyframeOptions);

1つ目のelementはアニメーションの対象になるHTML要素を指定します。
ここには、先ほどarticle要素を取得して入れた変数content1を指定します。

2つ目のkeyframeSetはアニメーションの効果（エフィクト）の指定です。
ここは、上記のコードのうち以下の部分が該当します。

[
  {
    opacity: 1,
    offset: 0,
    easing: 'ease'
  },
  {
    opacity: 0.2,
    offset: 0.3
  },
  {
    opacity: 0.2,
    offset: 0.7,
    easing: 'ease'
  },
  {
    opacity: 1,
    offset: 1
  }
]

配列の中に、4つのオブジェクトが入った形になっています。
これはアニメーションの状態を表しており、opacityの値だけに注目するとアニメーション開始時は1から始まって、状態2の0.2、状態3の0.2、そして最終地点の1へと順に変化していく指定になります。

opacity以外にもoffsetとeasingを指定しています。

opacityはアニメーションの再生時間全体を100%としたときの状態の再生位置を指定することができます。
0は開始時点、0.3は30%、0.7は70%、1は100%で最終地点になります。
次の再生位置に向かいながら、今の状態から次の状態になるようにアニメーションは進んでいきます。

もう1つのeasingは次の状態に向かうときのアニメーションの効果（エフィクト）を指定します。
初期値は「linear」で平坦なアニメーションですが、「ease」と指定すると「最初はゆっくり、だんだん速く」のようなアニメーションにすることができます。
その他にも「ease-in」、「eaes-out」、「cubic-bezier」を使うことができます。

上記の状態では状態2と状態3はopacityの値が同じです。
このように指定すると、一定時間opacityを0.7の状態で維持するようなことができます。

3つ目のkeyframeOptionsはアニメーションの再生設定です。
上記のコードのうち、以下の部分が該当します。

{
  duration: 2000,
  direction: 'alternate',
  iterations: 2
}

durationは全体の再生時間、directionは再生する向き、iterationsは繰り返す回数を指定しています。
ここで指定できる値について詳しくは、「Web Animations APIを使う」の「KeyframeEffectオブジェクトのアニメーション再生設定」をご覧ください。

「(3) Animationオブジェクトのインスタンス作成」では、Animationオブジェクトのコンストラクタに先ほど作成したKeyframeEffectオブジェクトのインスタンスを渡してインスタンスを作成します。

最後に、「(4) ボタンが押されたらアニメーション再生」で「アニメーション開始」ボタンが押されたらアニメーションが再生されるように設定します。
イベントリスナーでイベント「click」を登録して、押されたタイミングでAniamtionオブジェクトのplayメソッドを実行します。

以上がopcityプロパティを使った透過アニメーションの基本的な実装になります。
上記のコードをブラウザで実行すると、article要素が子孫要素ごと透過するアニメーションが実行されます。

backgroundプロパティを使った透過アニメーション

backgroundプロパティは適用した要素のみ透過します。

以下の例はbackgroundプロパティを使った透過アニメーションですが、コードは先述の「opacityプロパティを使った透過アニメーション」とほぼ同じです。
違いはアニメーションの効果（エフィクト）の指定部分でopcityプロパティをbackgroundプロパティに置き換えていることです。

サンプルページはこちら

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,
    [
      {
        background: 'rgba( 95, 172, 231, 1.0)',
        offset: 0,
        easing: 'ease'
      },
      {
        background: 'rgba( 95, 172, 231, 0.2)',
        offset: 0.3
      },
      {
        background: 'rgba( 95, 172, 231, 0.2)',
        offset: 0.7,
        easing: 'ease'
      },
      {
        background: 'rgba( 95, 172, 231, 1.0)',
        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();
  });
});

コードの解説についても先述した内容と重なるため省略します。
こちらのコードを実行してみると、article要素のみが透過して他の要素は透過しないアニメーションが再生されます。