CSS transition、CSS animationとの比較

キーフレームの制御まで含めてJavaScriptだけで管理可能

CSSによるアニメーション(CSS Transition、CSS Animation)もご参照ください。

Web Animations APIのオプション	CSS Animationsのオプション
duration	animation-duration
delay	animation-delay
fill	animation-fill-mode
iterations	animation-iteration-count
direction	animation-direction
easing	animation-timing-function
iterationStart	なし
endDelay	なし

web animations api独自のオプション	内容
iterationStart	アニメーションの実行開始位置を設定　0.5 の場合 50% の位置から始まり1周する (50% -> 100%/0% -> 50%)
endDelay	アニメーションが終わってから後続のアニメーションを開始するまでの時間

キーフレーム

offsetで指定できます。範囲(0～1)
未指定の場合は等間隔になります。

アニメーションの例

大きさ変更のアニメーション

html

<div class="rect"></div>

css

.rect {
  background-color: red;
  width: 100px;
  height: 100px;
}

js

const element = document.querySelector(".rect");

element.animate(
  [
    {
      transform: "scale(1)",
      offset: 0
    },

    {
      transform: "scale(2)",
      offset: 0.8
    },

    {
      transform: "scale(10)",
      offset: 1
    }

  ],

  {
    duration: 1000,
    fill: 'forwards',
    easing: 'ease'
  }
);

移動のアニメーション

html

<div class="rect"></div>

css

.rect {
  background-color: red;
  width: 100px;
  height: 100px;
}

js

const element = document.querySelector(".rect");

element.animate(
  [
    {
      transform: "translateX(0px)",
      offset: 0
    },

    {
      transform: "translateX(10px)",
      offset: 0.8
    },

    {
      transform: "translateX(100px)",
      offset: 1
    }

  ],

  {
    duration: 1000,
    fill: 'forwards',
    easing: 'ease'
  }

);

透明度のアニメーション

html

<div class="rect"></div>

css

.rect {
  background-color: red;
  width: 100px;
  height: 100px;
}

js

const element = document.querySelector(".rect");

element.animate(
  [
    {
      opacity: 0,
      offset: 0
    },

    {
      opacity: 0.5,
      offset: 0.8
    },

    {
      opacity: 1,
      offset: 1
    }
  ], 
  {
    duration: 10000,
    fill: 'forwards',
    easing: 'ease'
  }
);

明度のアニメーション

html

<div class="rect"></div>

css

.rect {
  background-color: red;
  width: 100px;
  height: 100px;
}

js

const element = document.querySelector(".rect");
 
element.animate(
  [
    {
      filter: "brightness(0%)",
      offset: 0
    },

    {
      filter: "brightness(50%)",
      offset: 0.2
    },

    {
      filter: "brightness(100%)",
      offset: 1
    }

  ],

  {
    duration: 1000,
    fill: 'forwards',
    easing: 'ease'
  }
            
);

彩度のアニメーション

html

<div class="rect"></div>

css

.rect {
  background-color: red;
  width: 100px;
  height: 100px;
}

js

const element = document.querySelector(".rect");

element.animate(
  [
    {
      filter: "grayscale(0%)",
      offset: 0
    },

    {
      filter: "grayscale(50%)",
      offset: 0.2
    },

    {
      filter: "grayscale(100%)",
      offset: 1
    }

  ],

  {
    duration: 1000,
    fill: 'forwards',
    easing: 'ease'
  }
);

複合アニメーション

例：四角が徐々に不透明になり、回転しながら右に移動

html

<div class="rect"></div>

css

.rect{
  background-color: red;
  width:100px;
  height:100px
}

js

const element = document.querySelector(".rect");

element.animate(
  [
    {
      transform: "translateX(0px) rotate(0deg)",
      opacity: 0,
      offset: 0
    },

    {
      transform: "translateX(10px) rotate(180deg)",
      opacity: 0.2,
      offset: 0.5
    },

    {
      transform: "translateX(1000px) rotate(270deg)",
      opacity: 1,
      offset: 1
    }

  ],

  {
    duration: 1000,
    fill: 'forwards',
    easing: 'ease'
  }
);

アニメーション実行中のコントロール

メソッド	内容
play()	再生する
pause()	一時停止する
reverse()	逆再生する
cancel()	再生をやめる
finish()	終了時点まで進める
updatePlaybackRate()	再生速度を設定

プロパティ	内容
currentTime	アニメーションの現在時間を表示(ミリ秒)
effect	アニメーションのAnimationEffectReadOnlyの取得、設定
finished	アニメーション終了時に Promiseを返す
id	アニメーションを識別するStringの取得、設定
pending	アニメーションが再生の非同期処理(初期化、再生停止)のため現在待ち状態かどうか
playState	アニメーションの再生状況を返す
playbackRate	アニメーションの再生速度の取得、設定
ready	アニメーションの再生準備ができた時にPromiseを返す
startTime	アニメーションが再生される時間の取得、設定
timeline	アニメーションのtimelineの取得、設定

再生速度のプロパティの値	内容
playbackRate =2	2倍速
playbackRate =-1	逆再生
playbackRate *= 1.5	実行されるたびに再生速度が 1.5 倍

イベント	内容
oncancel	アニメーション中止時に発生するイベント
onfinish	アニメーション終了時に発生するイベント

html

<div class="rect"></div>

<div class="pause">Pause</div>
<div class="play">Play</div>
<div class="reverse">Reverse</div>
<div class="finish">Finish</div>
<div class="cancel">Cancel</div>

css

.rect {
  background-color: red;
  width: 100px;
  height: 100px;
}

js

const element = document.querySelector(".rect");

const pause = document.querySelector(".pause");
const play = document.querySelector(".play");
const reverse = document.querySelector(".reverse");
const cancel = document.querySelector(".cancel");
const finish = document.querySelector(".finish");

const move = element.animate(
  [
    {
      transform: "translateX(0px) rotate(0deg)",
      offset: 0
    },

    {
      transform: "translateX(10px) rotate(180deg)",
      offset: 0.5
    },

    {
      transform: "translateX(1000px) rotate(270deg)",
      offset: 1
    }

  ],

  {
    duration: 10000,
    fill: 'forwards',
    easing: 'ease'
  }
);
move.pause();


move.onfinish = () => {
  console.log("アニメーションが終了した");
};

move.oncancel = () => {
  console.log("アニメーションがキャンセルされた");
};


play.addEventListener("click", () => {
  move.play();
});

pause.addEventListener("click", () => {
  move.pause();
});

reverse.addEventListener("click", () => {
  move.reverse();
});

cancel.addEventListener("click", () => {
  move.cancel();
});


finish.addEventListener("click", () => {
  move.finish();
});

polyfill