Javascriptのanimate()でアニメーション再生

Javascriptのanimate()メソッドでアニメーションを再生する

Javascriptのanimate()メソッドでCSSのanimation+@keyframesプロパティのようにアニメーションを再生することが出来ます。
element.animate(キーフレーム, オプション)

オプション

delay:

アニメーション開始を遅らせるミリ秒数

direction:

アニメーションの方向と反復で以下のいずれかを指定できる

'normal' : 順方向
'reverse' : 逆順
'alternate' : 順方向から開始して反復
'alternate-reverse' : 逆順から開始して反復

duration:

アニメーションが完了するまでにかかるミリ秒

easing:

アニメーションの変化率で以下のような値を指定できる

'linear' : 線形補間
'ease' : 補間がゆっくりと始まり、急激に加速し、最後に向かって徐々に遅くなる
'ease-in: 補間がゆっくりと開始され、最後まで徐々に速度が上がり、終了時点で突然停止する'
'ease-out : 補間が突然始まり、最後に向かって徐々に速度が低下する'
'ease-in-out : 補間がゆっくりと開始され、速度が上がり、最後に近づくにつれて速度が低下する'
'step-start' : 補間が直ちに最終状態にジャンプし、最後までその状態が維持される
'steps(1, jump-start)' または 'steps(1, start)' を表します
'step-end' : 補間が最後まで初期状態に留まり、その時点で最終状態に直接ジャンプする
'steps(1, jump-end)' または 'steps(1, end)' を表します
'cubic-bezier(0.42,0,0.58,1)'

endDelay:

終了後に遅延するミリ秒数

fill:

アニメーションの前後に効果を要素に反映するか

'backforwards' : アニメーションの効果を再生前に要素に反映する
'forwards' : アニメーションの再生が完了した後も保持する
'both' : 両方(backforwards+forwards)
'none' : 無し

iterationStart:

反復のどの時点でアニメーションを開始するか
例えば iterationStart:0.5, で1回目の反復の途中(真ん中)で再生を開始する

iterations

反復回数

pseudoElement:

指定したエレメントではなく指定した疑似要素にアニメーションさせることができる
例えば pseudoElement: "::before", で疑似要素::beforeに適用することができる

サンプル

背景「白⇒黒⇒白」、文字色「赤⇒緑⇒赤」にアニメーション

ここがアニメーションします

<input type="button" onclick="ani1()" value="アニメーション開始">
<span id="ani1" style="font-weight:bold;font-size:18px;color:#ff0000;background:#fff;">
  ここがアニメーションします
</span>
<script>
  function ani1(){
    const ani1=document.querySelector("#ani1");
    ani1.animate(
      [
        {color:'#ff0000',background:'#fff'},
        {color:'#00ff00',background:'#000'},
        {color:'#ff0000',background:'#fff'},
      ],{
        delay: 0,
        direction: 'normal',
        duration: 2000,
        easing: 'linear',
        endDelay: 0,
        fill: 'both',
        iterationStart: 0.0,
        iterations: 1,
      }
    );
  }
</script>

不透明度(opacity)「1⇒0⇒1」にアニメーション

ここがアニメーションします

<input type="button" onclick="ani2()" value="アニメーション開始">
<span id="ani2" style="font-weight:bold;font-size:18px;color:#ff0000;background:#fff;">
  ここがアニメーションします
</span>
<script>
  function ani2(){
    const ani2=document.querySelector("#ani2");
    ani2.animate(
      [
        {opacity:1}, {opacity:0}, {opacity:1}
      ],{
        delay: 0,
        direction: 'normal',
        duration: 1000,
        easing: 'linear',
        endDelay: 0,
        fill: 'both',
        iterationStart: 0.0,
        iterations: 1,
      }
    );
  }
</script>

360度回転(rotateY)するアニメーション

ここがアニメーションします

<input type="button" onclick="ani3()" value="アニメーション開始">
<span id="ani3" style="font-weight:bold;font-size:18px;color:#000;display:inline-block;">
  ここがアニメーションします
</span>
<script>
  function ani3(){
    const ani3=document.querySelector("#ani3");
    ani3.animate(
      [
        {transform: 'rotateY(0deg)'}, {transform: 'rotateY(360deg)'}
      ],{
        delay: 0,
        direction: 'normal',
        duration: 2000,
        easing: 'linear',
        endDelay: 0,
        fill: 'both',
        iterationStart: 0.0,
        iterations: 1,
      }
    );
  }
</script>

360度回転(rotateZ)、大きさ(scale)［100%⇒10%⇒100%］するアニメーション

ここがアニメーションします

<input type="button" onclick="ani4()" value="アニメーション開始">
<span id="ani4" style="font-weight:bold;font-size:18px;color:#000;display:inline-block;">
  ここがアニメーションします
</span>
<script>
  function ani4(){
    const ani4=document.querySelector("#ani4");
    ani4.animate(
      [
        {transform: 'scale(100%,100%) rotateZ(  0deg)'},
        {transform: 'scale( 10%, 10%) rotateZ(180deg)'},
        {transform: 'scale(100%,100%) rotateZ(360deg)'}
      ],{
        delay: 0,
        direction: 'normal',
        duration: 2000,
        easing: 'linear',
        endDelay: 0,
        fill: 'both',
        iterationStart: 0.0,
        iterations: 1,
      }
    );
  }
</script>

疑似要素::beforeにアニメーション

←ここがアニメーションします

<input type="button" onclick="ani5()" value="アニメーション開始">
<span id="ani5" style="font-weight:bold;font-size:18px;color:#000;display:inline-block;position:relative;padding-left:1em;box-sizing:border-box;">
  ←ここがアニメーションします
</span>
<style>
  #ani5::before{
    content:"■";
    position:absolute;
    left:0;
  }
</style>
<script>
  function ani5(){
    const ani5=document.querySelector("#ani5");
    ani5.animate(
      [
        {transform: 'translate( 0.0em, 0.0em) rotateZ(  0deg)', color:'#000'},
        {transform: 'translate( 0.5em, 0.5em) rotateZ( 90deg)', color:'#f00'},
        {transform: 'translate( 0.0em, 0.0em) rotateZ(180deg)', color:'#0f0'},
        {transform: 'translate(-0.5em,-0.5em) rotateZ(270deg)', color:'#00f'},
        {transform: 'translate( 0.0em, 0.0em) rotateZ(360deg)', color:'#000'}
      ],{
        delay: 0,
        direction: 'normal',
        duration: 2000,
        easing: 'linear',
        endDelay: 0,
        fill: 'both',
        iterationStart: 0.0,
        iterations: 1,
        pseudoElement: "::before",
      }
    );
  }
</script>