Web Animations API

const box = document.getElementById("box")
box.animate(
[
  { transform: 'rotate(0)', opacity: 1 },// 0%のキーフレーム
  {opacity: 0}, // 50%のキーフレーム
  { transform: 'rotate(360deg)', opacity: 1 } // 100%のキーフレーム
]
{
  iterations: Infinity,
  duration: 5000
}
)

//配列(オブジェクトの配列)
[
  { transform: 'rotate(0)', opacity: 1 },// 0%のキーフレーム
  {opacity: 0}, // 50%のキーフレーム
  { transform: 'rotate(360deg)', opacity: 1 } // 100%のキーフレーム
]

//オブジェクト(キーはCSSプロパティ・値は反復する値の配列)
{
  transform: [ 'rotate(0)', 'rotate(360deg)' ], //0%、100% の時の値
  opacity:[1, 0, 1]  // 0%、50%、100% の時の値
}

/*オブジェクトの配列
カンマで区切ったオフセットを直接指定できる
例では、色は10%で変化する*/
[
  { transform: 'rotate(0)', backgroundColor: '#ccc' },
  { backgroundColor: '#222', offset:0.1}, 
  { transform: 'rotate(360deg)', backgroundColor: '#ccc' } 
]

/*オブジェクト
指定された各オフセットが対応するキーフレームに適用されます
値が不十分な場合、オフセットが指定されていないキーフレームは等間隔になります*/
{
  transform: [ 'rotate(0)', 'rotate(360deg)' ], //0%、100% の時の値
  backgroundColor:['#ccc', '#222', '#ccc'], // 0%、10%、100% の時の値
  offset: [ 0, 0.1, 1]
}

//オブジェクトの配列
[
  { transform: 'rotate(0)', backgroundColor: '#ccc' },
  { backgroundColor: '#222', easing:'step-start'}, 
  { transform: 'rotate(360deg)', backgroundColor: '#ccc' } 
]

//オブジェクト
{
  transform: [ 'rotate(0)', 'rotate(360deg)' ], //0%、100% の時の値
  backgroundColor:['#ccc', '#222', '#ccc'], // 0%、10%、100% の時の値
  easing: ['linear','step-start','linear']
}

document.getElementById("box").animate(
[
  { transform: 'rotate(0)', backgroundColor: '#ccc' },
  { backgroundColor: '#222'}, 
  { transform: 'rotate(360deg)', backgroundColor: '#ccc' }
],5000)

<div id="box" style="width:100px; height:100px; background:#ccc; margin: 0 auto"></div>
<button id="play">play</button>
<button id="pause">pause</button>
<script>
const box = document.getElementById("box")
const play = document.getElementById("play")
const pause = document.getElementById("pause")
const animate = box4.animate(
[
  { transform: 'rotate(0)', backgroundColor: '#ccc' },
  { backgroundColor: '#222'}, 
  { transform: 'rotate(360deg)', backgroundColor: '#ccc' }
],5000)
animate.pause()
play.addEventListener('click',()=>animate1.play())
pause.addEventListener('click',()=>animate1.pause())
</script>

addEventListener("finish", (event) => {
 //アニメーションが終了した時に実行する処理
 })

onfinish = (event) => { 
 //アニメーションが終了した時に実行する処理
}

finished.then(()=> {
  //アニメーションが終了した時に実行する処理
});

// 全てのアニメーションが終わるまで待つ
//getAnimationsの引数に{ subtree: true } を指定するとElementの子孫をターゲットとしたアニメーションも返します
const animations = Element.getAnimations();
const myAnimate = async () => {
  await Promise.all(animations.map((animation) => animation.finished));

}

document.getAnimations().forEach(animation=>{
   animation.playbackRate *= .5;
   console.log(animation)
})

<style>
.char{ 
 display: inline-block;
}
</style>
<p class="letters">HELLO WORLD</p>
<button id="start">start</button>
<script>
//JavaScriptで1文字ごとに<span>タグを追加
const el = document.querySelector('.letters');
const start = document.getElementById("start")
 const chars = el.innerHTML.trim().split("");
 el.innerHTML = chars.reduce((acc, char) => {
    char = char.replace(/\s+/, ' ');
    return `${acc}<span class="char">${char}</span>`;
  }, "");
//span要素を取得して配列に
const spans = document.querySelectorAll('.char');
const spansArray = Array.from(spans)
//animateの配列
const animations = spansArray.map((char, index) => {
  return char.animate(
    [
      {
        transform: `translateY(50px)`,
        opacity: 0
      },
      {
        transform: `translateY(0px)`,
        opacity: 1
      }
    ],
    {
      duration: 2000,
      easing: 'ease',
      fill: 'backwards',
      delay: 2000/chars.length * index+1
    }
  );
});
animations.forEach(animation=>{
  animation.pause()
})
//クリックした時
start.addEventListener('click', ()=>{
animations.forEach(animation=>{
  animation.finish()
  animation.play()
  })
})
</script>

.box{
 --rotate3d: rotate3d(1,0,0,360deg);
 animation: rotate 10s;
}
@keyframes rotate {
 to{ /*これではSafariでは動作しない、動作するには％で数回に分ける必要が*/
   transform: var(--rotate3d);
  }
}

const box = document.querySelector('.box') 
box.style.setProperty('--rotate3d', 'rotate3d(0,1,0,360deg)')

const box = document.querySelector('#box') 
const anim = box.animate(
  {
   transform: [ 'rotate3d(0,1,0,0)', 'rotate3d(0,1,0,-120deg)' ,  'rotate3d(0,1,0,-240deg)', 'rotate3d(0,1,0,-360deg)' ], 
  },
 {
   iterations: Infinity,
   duration: 10000
 }
)
//要素をクリックしたら, 
　let x = true;
  box.addEventListener('click',()=>{
    let val = x ? '0,1,0': '1,0,0'
    x = !x  
    anim.effect.setKeyframes( {
     transform: [ `rotate3d(${val},0)`, `rotate3d(${val},-120deg)`, `rotate3d(${val},-240deg)`, `rotate3d(${val},-360deg)` ]
   })
 })