Web Design Leaves

document.getElementById('target').animate(
  [
    {
      transform:'translateX(0)',
      backgroundColor:'#85A0F5',
      offset: 0  //0%
    },
    {
      transform:'translateX(100px)',
      backgroundColor:'pink',
      offset: 0.2  //20%
    },
    {
      transform:'translateX(200px)',
      backgroundColor:'red',
      offset: 1.0  //100%
    },
  ],
  2000,
);   

document.getElementById('target').animate(
  {
    transform: [ 'translateX(0)', 'translateX(100px)', 'translateX(200px)'],
    backgroundColor: [ '#85A0F5', 'pink', 'red'],
    offset: [ 0, 0.2, 1]  //offset プロパティ
  },
  2000,
);    

document.getElementById('target').animate(
   [
    {
      transform:'translateX(0)',
      backgroundColor:'#85A0F5',
      offset: 0,
      easing: 'ease'  //easing プロパティを指定
    },
    {
      transform:'translateX(100px)',
      backgroundColor:'pink',
      offset: 0.2,
      easing: 'ease-in-out'  //easing プロパティを指定
    },
    {
      transform:'translateX(200px)',
      backgroundColor:'red',
      offset: 1.0
    },
  ],
  2000,
);

document.getElementById('target').animate(
  {
    transform: [ 'translateX(0)', 'translateX(100px)', 'translateX(200px)'],
    backgroundColor: [ '#85A0F5', 'pink', 'red'],
    offset: [ 0, 0.2, 1],
    easing: ['ease', 'ease-in-out', 'linear'] //easing プロパティ
  },
  2000,
);

const target = document.getElementById('target');

document.getElementById('start').addEventListener('click', () => {
  //垂直方向のアニメーション
  target.animate(
     [
      {top:'0px', easing:'ease-in-out'},
      {top:'135px'},
      {top:'270px'},
    ],
    2000,
  );
  //水平方向のアニメーション
  target.animate(
     [
      {left:'0px'},
      {left:'270px'},
    ],
    2000,
  );
});

document.getElementById('target').animate(
  [
    //終了状態のキーフレームだけを指定
    { transform: 'rotate(1080deg)', backgroundColor: 'pink' }
  ],
  {
    duration: 2000,
    easing: 'ease-in-out'
  },
);

<p class="icon-arrow">Sample Text</p>

.icon-arrow {
  position: relative;
  padding-left: 20px;
  cursor: pointer;
}

/* ::before で矢印アイコンを挿入 */
.icon-arrow::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto 0;
  width: 12px;
  height: 12px;
  border-top: 3px solid red;
  border-right: 3px solid blue;
  transform: rotate(45deg);
}

// icon-arrow クラスを指定した要素を取得
const iconArrow = document.querySelectorAll('.icon-arrow');

//取得したそれぞれの要素に
iconArrow.forEach((elem) => {
  //回転が適用されているか
  let isActive = false;
  //クリックイベントのリスナーを設定
  elem.addEventListener("click", (e) => {
    if(!isActive) {
      //e.currentTarget は icon-arrow クラスを指定した要素
      const rotateIcon = e.currentTarget.animate(
        { rotate: ["0deg", "90deg"] },
        // options オブジェクト
        {
          duration: 300,
          // pseudoElement プロパティに ::before を指定
          pseudoElement: "::before",
          easing: 'ease-in',
          fill: 'forwards',
        }
      );
      isActive = true;
    }else{
      const rotateIcon = e.currentTarget.animate(
        { rotate: ["90deg", "0deg"] },
        // options オブジェクト
        {
          duration: 300,
          // pseudoElement プロパティに ::before を指定
          pseudoElement: "::before",
          easing: 'ease-in',
          fill: 'forwards',
        }
      );
      isActive = false;
    }
  });
});

<p class="icon-arrow-hover">Sample Text</p>

// icon-arrow クラスを指定した要素を取得
const iconArrowHover = document.querySelectorAll('.icon-arrow-hover');

//取得したそれぞれの要素に mouseenter と mouseleave イベントのリスナーを設定
iconArrowHover.forEach((elem) => {
  // mouseenter イベントのリスナーを設定
  elem.addEventListener("mouseenter", (e) => {
    //e.currentTarget はリスナーを登録した要素（iconArrowHover == elem）
    enterIconArrow(e.currentTarget);
    // または enterIconArrow(elem); でも同じ
  });
  // mouseleave イベントのリスナーを設定
  elem.addEventListener("mouseleave", (e) => {
    //e.currentTarget はリスナーを登録した要素（iconArrowHover）
    leaveIconArrow(e.currentTarget);
  });
});

// mouseenter で呼び出すアニメーションの関数
function enterIconArrow(element) {
  const rotate = ["0deg", "90deg"];
  const options = {
    duration: 300,
    pseudoElement: "::before",
    easing: 'ease-in',
    fill: 'forwards',
  };
  element.animate({ rotate }, options);
};
// mouseleave で呼び出すアニメーションの関数
function leaveIconArrow(element) {
  const rotate =  ["90deg", "0deg"];
  const options = {
    duration: 300,
    pseudoElement: "::before",
    easing: 'ease-in',
    fill: 'forwards',
  };
  element.animate({ rotate }, options);
};

const iconArrowHover = document.querySelectorAll('.icon-arrow-hover');

//取得したそれぞれの要素に mouseenter と mouseleave イベントのリスナーを設定
iconArrowHover.forEach((elem) => {
  elem.addEventListener("mouseenter", () => {
    elem.animate(
      { rotate: ["0deg", "90deg"] },
      {
        duration: 300,
        pseudoElement: "::before",
        easing: 'ease-in',
        fill: 'forwards',
      }
    );
  });
  elem.addEventListener("mouseleave", () => {
    elem.animate(
      { rotate: ["90deg", "0deg"] },
      {
        duration: 300,
        pseudoElement: "::before",
        easing: 'ease-in',
        fill: 'forwards',
      }
    );
  });
});

<a href="#" class="icon-plus"></a>

.icon-plus {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 1px solid #999;
}
.icon-plus::before,
.icon-plus::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 6px;
  right: 6px;
  margin-top: -2px;
  border-top: 4px solid #666;
}
.icon-plus::before {
  transform: rotate(90deg);
}

const iconPlus = document.querySelectorAll('.icon-plus');

iconPlus.forEach((elem) => {
  let isActive = false;
  elem.addEventListener("click", (e) => {
    //リンク先にページが移動するデフォルトの動作をキャンセル
    e.preventDefault();
    if(!isActive) {
      //::before のアニメーション
      const rotate1 = e.currentTarget.animate(
        {
          rotate: ["0deg", "90deg"],
          opacity: [1,0]
        },
        {
          duration: 300,
          // pseudoElement プロパティに ::before を指定
          pseudoElement: "::before",
          easing: 'ease-in',
          fill: 'forwards',
        }
      );
      //::after のアニメーション
      const rotate2 = e.currentTarget.animate(
        { rotate: ["0deg", "180deg"]},
        {
          duration: 300,
          // pseudoElement プロパティに ::after を指定
          pseudoElement: "::after",
          easing: 'ease-in',
          fill: 'forwards',
        }
      );
      isActive = true;
    }else{
      //::before のアニメーション
      const rotate1 = e.currentTarget.animate(
        {
          rotate: ["90deg", "0deg"],
          opacity: [0,1]
        },
        {
          duration: 300,
          // pseudoElement プロパティに ::before を指定
          pseudoElement: "::before",
          easing: 'ease-in',
          fill: 'forwards',
        }
      );
      //::after のアニメーション
      const rotate2 = e.currentTarget.animate(
        { rotate: ["180deg", "0deg"] },
        {
          duration: 300,
          // pseudoElement プロパティに ::after を指定
          pseudoElement: "::after",
          easing: 'ease-in',
          fill: 'forwards',
        }
      );
      isActive = false;
    }
  });
});

//アニメーションの対象の要素を取得
const target = document.getElementById('target');

//クリックするボタンの要素を取得
const startBtn = document.getElementById('start');

//ボタンの要素にクリックイベントを設定
startBtn.addEventListener('click', () => {

  //transform プロパティのアニメーション（右斜下に移動）を設定
  target.animate(
     [
      {transform: 'translate(0px, 0px)'},
      {transform: 'translate(270px, 270px)'},
    ],
    {
      duration:2000,
    },
  );

  //transform プロパティのアニメーション（左斜上に移動）を設定
  target.animate(
     [
      {transform: 'translate(270px, 200px)'},
      {transform: 'translate(100px, 100px)'},
    ],
    {
      duration: 1000,
      delay: 500
    },
  );
});

<div id="target"></div>
<button id="start" type="button">Start</button>

target.animate(
   [
    {transform: 'translateX(0px)'},
    {transform: 'translateX(270px)'},
  ],
  {
    duration: 1000,
  },
);
target.animate(
   [
    {transform: 'translateY(0px)'},
    {transform: 'translateY(270px)'},
  ],
  {
    duration: 1000,
    composite: 'replace'  //サンプルのラジオボタンで変更
  },
); 

target.animate(
   [
    {transform: 'translateX(0px)'},
    {transform: 'translateX(270px)'},
  ],
  {
    duration: 2000, //確認しやすいように 2000 に変更
  },
);
//追加のアニメーション
target.animate(
   [
      {transform: 'scale(0.5)'},
      {transform: 'scale(1.5)'},
  ],
  {
    duration: 2000,
    composite: 'replace'  //サンプルのラジオボタンで変更
  },
);
target.animate(
   [
    {transform: 'translateY(0px)'},
    {transform: 'translateY(270px)'},
  ],
  {
    duration: 2000,
    composite: 'replace'  //サンプルのラジオボタンで変更
  },
); 

//アニメーション対象の g 要素（SVG 要素）
const target = document.getElementById('target');

//同じ要素の同一プロパティにアニメーションを設定
const animations = [
  target.animate(
    [
      {transform: 'rotate(0deg)'},
      {transform: 'rotate(360deg)'},
    ],
    {
      duration: 12000,
      iterations:Infinity
    }
  ),
  target.animate(
    [
      {transform: 'translate(70px, 0) rotate(0deg) translate(-70px, 0)'},
      {transform: 'translate(70px, 0) rotate(-360deg) translate(-70px, 0)'},
    ],
    {
      duration:1400,
      iterations:Infinity,
      composite: 'add'  //accumulate や replace に変更すると動作が異なる
    }
  )
];

//上記で作成したアニメーションの自動再生を停止
animations.forEach( (animation) => {
  animation.cancel();
});

//Start ボタン
const toggle = document.getElementById('toggle');

//Start ボタンにクリックイベントを設定
toggle.addEventListener('click', (e) => {
  //それぞれのアニメーションに対して実行
  animations.forEach( (animation) => {
    // playState が running でなければ再生し、ボタンのラベルを Pause に変更
    if(animation.playState !== 'running'){
      animation.play();
      toggle.textContent = 'Pause';
    }else{
       // playState が running であれば停止し、ボタンのラベルを Start に変更
       animation.pause();
       toggle.textContent = 'Start';
    }
  });
});

const target = document.getElementById('target');
//1つ目のアニメーション
const animation1 =  target.animate(
  [
    {transform: 'rotate(0deg)'},
    {transform: 'rotate(360deg)'},
  ],
  {
    duration: 12000,
    iterations:Infinity
  }
);
animation1.cancel();
//2つ目のアニメーション
const animation2 =  target.animate(
  [
    {transform: 'translate(70px, 0) rotate(0deg) translate(-70px, 0)'},
    {transform: 'translate(70px, 0) rotate(-360deg) translate(-70px, 0)'},
  ],
  {
    duration:1400,
    iterations:Infinity,
    composite: 'add'
  }
);
animation2.cancel();

const toggle = document.getElementById('toggle');
toggle.addEventListener('click', (e) => {
  [animation1, animation2].forEach( (animation) => {
    if(animation.playState !== 'running'){
      animation.play();
      toggle.textContent = 'Pause';
    }else{
       animation.pause();
       toggle.textContent = 'Start';
    }
  });
});

document.getElementById('target').animate(
  [
    { transform: 'rotate(0deg) translateX(0px)', opacity: 0 },
    {  transform: 'rotate(360deg) translateX(50px)', opacity: .5 }
  ],
  {
    duration: 2000,  //持続時間
    iterations: 2,  //2回繰り返し
    fill: 'forwards',
    iterationComposite: 'accumulate' //accumulate（累積）を指定
  }
);

document.getElementById('target').animate(
  [
    { transform: 'rotate(0deg) translateX(0px)', opacity: 0},
    //終了時の値は2倍の値を指定
    { transform: 'rotate(720deg) translateX(100px)', opacity: 1}
  ],
  {
    duration: 4000,  //持続時間（2倍）
    iterations: 1,   //1回繰り返し
    fill: 'forwards',
    iterationComposite: 'replace' //デフォルトの replace
  }
);

const target = document.getElementById('target');

//変数に Animation オブジェクトを保存
const animation = target.animate(
  [
    {transform: 'translateX(0px)', backgroundColor: 'blue'},
    {transform: 'translateX(200px)', backgroundColor: 'green'}
  ],
  {
    duration: 2000,
    fill: 'forwards'
  }
);
//アニメーションを停止
animation.cancel();

const btn = document.getElementById('start');

btn.addEventListener('click', (e) => {
  //Animation オブジェクトを再利用
  animation.play();
});

const target = document.getElementById('target');
const btn = document.getElementById('start');

btn.addEventListener('click', (e) => {

  //getAnimations() でこの要素の Animation オブジェクトの配列を取得してすべて停止
  target.getAnimations().forEach((anim) => anim.cancel());

  target.animate(
    [
      {transform: 'translateX(0px)', backgroundColor: 'blue'},
      {transform: 'translateX(200px)', backgroundColor: 'red'}
    ],
    {
      duration: 2000,
      fill: 'forwards'
    }
  );
});

var currentTimeValues = animation.effect.getComputedTiming();

<div id="target"></div>
<button type="button" id="start">Start</button>
<button type="button" id="check">Check</button>
<div class="output" id="output"></div>

//アニメーション対象の要素を取得
const target = document.getElementById('target');

// animate() でアニメーションを作成
const animation = target.animate(
  [
    { transform: 'translateX(0px)' },
    { transform: 'translateX(300px)' },
  ],
  {
    duration: 2000,
    delay: 500,
    endDelay: 800,
    easing: 'ease-in-out',
    iterations: 6,
    direction: 'alternate',
  }
);
//アニメーションの自動再生を停止
animation.cancel();

//Start ボタンの要素を取得
const start = document.getElementById('start');
//ボタンの要素にクリックイベントを設定
start.addEventListener('click', (e) => {
  animation.play(); //アニメーションを再生
});

//プロパティの値を取得して出力する関数
const outputProps = () => {
  //変数 timing にタイミングプロパティ（オブジェクト）を代入
  const timing = animation.effect.getComputedTiming();
  //それぞれのプロパティの値を取得
  const endTime = timing.endTime;
  const activeDuration = timing.activeDuration;
  const localTime = timing.localTime;
  //localTime を endTime で割って100をかけて進捗状況の％を取得
  const completed = Math.floor((localTime * 100 / endTime));
  const progress = timing.progress;
  const currentIteration = timing.currentIteration;
  //animation.currentTime プロパティ（localTime と等しい）
  const animationCurrentTime = animation.currentTime;
  //出力
  output.innerText='endTime(=delay＋activeDuration＋endDelay): '+endTime+"\n" +
    'activeDuration(=duration * iterationCount): ' + activeDuration + "\n" +
    'localTime: ' + localTime + "\n" +
    'animation.currentTime ( = localTime ): ' + animationCurrentTime + "\n" +
    'completed : ' + completed + "% \n" +
    'progress: ' + progress + "\n" +
    'currentIteration: ' + currentIteration + '（' + (currentIteration +1) + "回目）\n";
}

//Check ボタンの要素を取得
const check = document.getElementById('check');
//出力先の要素を取得
const output = document.getElementById('output');
//Check ボタンにクリックイベントを設定
check.addEventListener('click', (e) => {
  //一時停止
  animation.pause();
  //プロパティを取得して出力
  outputProps();
});

//Cancel ボタンの要素を取得
const cancel = document.getElementById('cancel');
//Cancel ボタンにクリックイベントを設定
cancel.addEventListener('click', (e) => {
  //アニメーションを停止してアニメーション呼び出し前の状態に戻す
  animation.cancel();
  //プロパティを取得して出力
  outputProps();
});

<div id="target"></div>
<button type="button" id="start">Start</button>
<button type="button" id="change">Change</button>

//アニメーションの対象の要素を取得
const target = document.getElementById('target');

//キーフレーム（１）
const keyframe1 = [
  { transform: 'translateX(0px)' },
  { transform: 'translateX(300px)' },
];
//キーフレーム（２）
const keyframe2 = [
  { backgroundColor: '#85A0F5' },
  { backgroundColor: 'pink' },
];

//アニメーションを生成
const animation = new Animation(
  new KeyframeEffect(
    target,  //アニメーションの対象の要素
    keyframe1,  //キーフレーム（１）
    {
      duration: 1000,
      easing: 'ease-in-out',
    },
  ),
  document.timeline
);

//start ボタンの要素を取得
const start = document.getElementById('start');

//start ボタンにクリックイベントを設定
start.addEventListener('click', (e) => {
  animation.play(); //クリックしたらアニメーションを再生
});

//change ボタンの要素を取得
const change = document.getElementById('change');

//どちらのキーフレームが使用されているかの判定用の変数
let isKeyframe1 = true;

//change ボタンにクリックイベントを設定
change.addEventListener('click', (e) => {
  //対象要素のアニメーションのキーフレームを置き換え
  animation.effect.setKeyframes(isKeyframe1 ? keyframe2 : keyframe1);
  //アニメーションを停止（keyframeEffects の適用を消去）
  animation.cancel();
  //判定用の変数の値を更新（反転）
  isKeyframe1 = !isKeyframe1;
});

const animation = target.animate(
  keyframe1,
  {
    duration: 1000,
    easing: 'ease-in-out',
  }
);
//自動的に再生されないように一度停止
animation.cancel(); 

const target = document.getElementById('target');
//タイミングプロパティ（１）
const timing1 = {
  delay: 500,
  duration: 500,
  easing: 'ease',
  iterations: 4,
  fill: 'none',
  direction: 'alternate'
};
//タイミングプロパティ（２）
const timing2 = {
  delay: 0,
  duration: 1000,
  easing: 'ease-in-out',
  iterations: 1,
  fill: 'forwards',
  direction: 'normal'
};

//アニメーションを生成
const animation = new Animation(
  new KeyframeEffect(
    target,
    [
      { transform: 'translateX(0px)' },
      { transform: 'translateX(300px)' },
    ],
    timing1,//タイミングプロパティ（１）
  ),
  document.timeline
);

//start ボタンの要素を取得
const start = document.getElementById('start');
//start ボタンにクリックイベントを設定
start.addEventListener('click', (e) => {
  animation.play();
});

//change ボタンの要素を取得
const change = document.getElementById('change');
//どちらのタイミングプロパティが使用されているかの判定用の変数
let isTiming1 = true;

change.addEventListener('click', (e) => {
  //対象要素のアニメーションのタイミングプロパティを入れ替え
  animation.effect.updateTiming(isTiming1 ? timing2 : timing1);
  //アニメーションを停止（keyframeEffects の適用を消去）
  animation.cancel();
  //判定用の変数の値を更新（反転）
  isTiming1 = !isTiming1;
});

const animation = target.animate(
  [
    { transform: 'translateX(0px)' },
    { transform: 'translateX(300px)' },
  ],
  timing1
);
//自動的に再生されないように一度停止
animation.cancel();

const animation = target.animate(
  [
    { transform: 'translateX(0px)' },
    { transform: 'translateX(300px)' },
  ],
  {
    delay: 500,
    duration: 500,
    easing: 'ease',
    iterations: 4,
    fill: 'none',
    direction: 'alternate'
  }
);
animation.cancel();

const start = document.getElementById('start');
start.addEventListener('click', (e) => {
  animation.play();
});
const change = document.getElementById('change');

change.addEventListener('click', (e) => {
  //変更後のタイミングプロパティ
  const timing = {
    delay: 0,
    duration: 1000,
    easing: 'ease-in-out',
    iterations: 1,
    fill: 'forwards',
    direction: 'normal'
  };
  //タイミングプロパティを変更
  animation.effect.updateTiming(timing);
  animation.cancel();
});

//現在の direction プロパティの値を取得
const direction = animation.effect.getTiming().direction;

if(direction === 'normal') {
  //direction プロパティの値を reverse に変更
  animation.effect.updateTiming({ direction: 'reverse' });
}else{
  //direction プロパティの値を normal に変更
  animation.effect.updateTiming({ direction: 'normal' });
}

// composite の値を取得（Animation は Animation オブジェクト）
var compositeValue = Animation.effect.composite;

// composite の値を設定（Animation は Animation オブジェクト）
Animation.effect.composite = 'accumulate';

//対象の要素を取得
const target = document.getElementById('target');

//アニメーションの作成
const animation1 =  target.animate(
  [
    {transform: 'rotate(0deg)'},
    {transform: 'rotate(360deg)'},
  ],
  {
    duration: 12000,
    iterations:Infinity
  }
);
animation1.cancel();

//アニメーションの作成
const animation2 =  target.animate(
  [
    {transform: 'translate(70px, 0) rotate(0deg) translate(-70px, 0)'},
    {transform: 'translate(70px, 0) rotate(-360deg) translate(-70px, 0)'},
  ],
  {
    duration:1400,
    iterations:Infinity,
    composite: 'add'  //composite の初期値を指定
  }
);
animation2.cancel();

/*・・・中略（Start ボタンなどのイベント設定等）・・・*/

//Add ボタンにクリックイベントを設定
document.getElementById('add').addEventListener('click', (e) => {
  //アニメーションの effect.composite の値が「add」でなければ
  if(animation2.effect.composite !== 'add') {
    //アニメーションの effect.composite の値を「add」に設定
    animation2.effect.composite = 'add';
  }
});

/*・・・以下省略・・・*/

const target = document.getElementById('target');
//animate() メソッドで Animation オブジェクトを生成し変数 animation に代入
const animation = target.animate(
  [
    { transform: 'translateX(0px)', backgroundColor: '#85A0F5' },
    { transform: 'translateX(300px)' , backgroundColor: 'pink' },
  ],
  {
    duration: 1000,
    easing: 'ease',
  }
);
//animate() メソッドによる自動再生を停止
animation.cancel();

//ボタンの要素を取得
const play = document.getElementById('play');
const reverse = document.getElementById('reverse');

play.addEventListener('click', () => {
  //生成した Animation オブジェクト（animation）の play() メソッドを実行
  animation.play(); //再生
});
reverse.addEventListener('click', () => {
  //生成した Animation オブジェクト（animation）の reverse() メソッドを実行
  animation.reverse(); //逆再生
});

const target = document.getElementById('target');
const animation = target.animate(
  [
    { transform: 'translateX(0px)', backgroundColor: '#85A0F5' },
    { transform: 'translateX(300px)' , backgroundColor: 'pink' },
  ],
  {
    duration: 1000,
    easing: 'ease',
  }
);
animation.cancel();
const play = document.getElementById('play');
const toggle = document.getElementById('toggle');

//playbackRate に設定する値の初期値（順方向）
let playbackRateVal = 1;

toggle.addEventListener('click', () => {
  //Toggle ボタンをクリックすると正と負の値を逆転
  playbackRateVal = playbackRateVal * -1;
});

play.addEventListener('click', () => {
  //playbackRate の値を更新
  animation.playbackRate = playbackRateVal;
  animation.play();
});

reverseBtn.addEventListener('click', () =>  {
  //direction の値を取得
  const direction = animation.effect.getTiming().direction;
  if(direction === 'normal') {
    animation.effect.updateTiming({ direction: 'reverse' });
  }else{
    animation.effect.updateTiming({ direction: 'normal' });
  }
  // running 状態でない場合は play() で再生
  if(animation.playState !== 'running') animation.play();
});

const target = document.getElementById('target');
const animation = target.animate(
  [
    { transform: 'translateX(0px)', backgroundColor: '#85A0F5' },
    { transform: 'translateX(300px)' , backgroundColor: 'pink' },
  ],
  {
    duration: 3000,
    easing: 'cubic-bezier(0.23, 1, 0.32, 1)', //easeOutQuint
    fill: 'forwards'  //アニメーション終了後に効果を保持
  }
);
animation.cancel(); //自動再生を停止

const play = document.getElementById('play');
const pause = document.getElementById('pause');
const finish = document.getElementById('finish');
const cancel = document.getElementById('cancel');

play.addEventListener('click', () => {
 animation.play(); //再生
});
reverse.addEventListener('click', () => {
 animation.reverse(); //逆再生
});
pause.addEventListener('click', () => {
 animation.pause(); //一時停止
});
finish.addEventListener('click', () => {
 animation.finish(); //終了
});
cancel.addEventListener('click', () => {
 animation.cancel(); //停止（取り消し）
});

<div id="target"></div>
<button type="button" id="left">Left</button>
<button type="button" id="right">Right</button>

//対象の要素を取得
const target = document.getElementById('target');

//アニメーションを入れる変数の宣言
let animation;

//要素を移動するアニメーションを生成する関数の定義
const move = (transformStart, transformEnd) => {
  //現在アニメーションが存在すれば停止して初期状態に戻す
  animation?.cancel();
  //または if(animation) animation.cancel();

  //animate() メソッドでアニメーションを生成して実行
  animation = target.animate(
    //引数で指定された値分移動（transform）するキーフレーム
    [
      { transform: transformStart },
      { transform: transformEnd }
    ],
    {
      duration: 1000,
      easing: 'ease-in',
      fill: 'forwards', //アニメーション終了後に効果を保持
    },
  );
}

//右に移動する関数（上記で定義した関数 move を利用）
const moveRight = () => {
  move('translateX(0)', 'translateX(300px)');
}

//左に移動する関数（上記で定義した関数 move を利用）
const moveLeft = () => {
  move('translateX(300px)', 'translateX(0)');
}

//Right ボタンをクリックしたら関数 moveRight() を実行
document.getElementById('right').addEventListener('click', ()=> {
  moveRight();
});

//Left ボタンをクリックしたら関数 moveLeft() を実行
document.getElementById('left').addEventListener('click', ()=> {
  moveLeft();
});

const target = document.getElementById('target');
let animation;

//キーフレームの開始点 transformStart 引数は不要なので削除
const move = (transformEnd) => {
  //現在アニメーションが実行されていれば一時停止
  animation?.pause();
  //現在の transform の値を取得して変数 transformStart に代入
  let transformStart = getComputedStyle(target).transform;
  //現在のアニメーションをキャンセル
  animation?.cancel();

  animation = target.animate(
    [
      { transform: transformStart },
      { transform: transformEnd }
    ],
    {
      duration: 1000,
      easing: 'ease-in',
      fill: 'forwards',
    },
  );
}

const moveRight = () => {
  //キーフレームの開始点 transformStart 引数は不要なので削除
  move('translateX(300px)');
}
const moveLeft = () => {
  //キーフレームの開始点 transformStart 引数は不要なので削除
  move('translateX(0)');
}
document.getElementById('left').addEventListener('click', ()=> {
  moveLeft();
});
document.getElementById('right').addEventListener('click', ()=> {
  moveRight();
});

//現在の playbackRate を変数に取得（Animation は Animation オブジェクト）
var currentPlaybackRate = Animation.playbackRate;

//playbackRate を newRate に設定
Animation.playbackRate = newRate;

const target = document.getElementById('target');
const animation = target.animate(
  [
    { transform: 'translateX(0px)', backgroundColor: '#85A0F5' },
    { transform: 'translateX(300px)' , backgroundColor: 'lightgreen' },
  ],
  {
    duration: 3000,
  }
);
//自動再生を停止
animation.cancel();
//ボタンと出力先の要素を取得
const play = document.getElementById('play');
const doubleUp = document.getElementById('doubleUp');
const halfDown = document.getElementById('halfDown');
const pause = document.getElementById('pause');
const toggle = document.getElementById('toggle');
const cancel = document.getElementById('cancel');
const output = document.getElementById('output');

play.addEventListener('click', () => {
  //アニメーションを再生
  animation.play();
  //playbackRate を出力
  output.textContent = 'playbackRate: ' +  animation.playbackRate;
});
doubleUp.addEventListener('click', () => {
  //playbackRate を2倍に
  animation.playbackRate *= 2;
  output.textContent = 'playbackRate: ' +  animation.playbackRate;
});
halfDown.addEventListener('click', () => {
  //playbackRate を半分に
  animation.playbackRate *= 0.5;
 output.textContent = 'playbackRate: ' +  animation.playbackRate;
});
toggle.addEventListener('click', () => {
  //playbackRate の正負を反転
  animation.playbackRate = animation.playbackRate * -1;
  output.textContent = 'playbackRate: ' +  animation.playbackRate;
});
pause.addEventListener('click', () => {
  animation.pause();
});
cancel.addEventListener('click', () => {
  animation.cancel();
});

//currentTime の値を取得（Animation は Animation オブジェクト）
var currentTime = Animation.currentTime;

//currentTime の値を設定（Animation は Animation オブジェクト）
Animation.currentTime = newTime;

animation.currentTime = animation.effect.getComputedTiming().delay + animation.effect.getComputedTiming().activeDuration / 2;

const target = document.getElementById('target');
const animation = target.animate(
  [
    { transform: 'translateX(0px)', backgroundColor: '#85A0F5' },
    { transform: 'translateX(300px)' , backgroundColor: 'lightgreen' },
  ],
  {
    duration: 3000,
    fill: 'forwards',
    delay: 0,
  }
);
//自動再生を停止
animation.cancel();

//Play ボタン
const play = document.getElementById('play');
play.addEventListener('click', () => {
  //アニメーションを再生
  animation.play();
  // currentTime を出力
  output.textContent = 'animation.currentTime : ' + animation.currentTime;
});

//50% ボタン
const fiftyPercent = document.getElementById('fiftyPercent');
fiftyPercent.addEventListener('click', () => {
  //アニメーションを一時停止
  animation.pause();
  //currentTime に delay と activeDuration の半分の値を設定して 50% の位置へ
  animation.currentTime = animation.effect.getComputedTiming().delay + animation.effect.getComputedTiming().activeDuration / 2;
  output.textContent = 'animation.currentTime : ' + animation.currentTime;
});

//delay の値を変更するスライダー（input type="range"）
const delay_slider = document.getElementById('delay_slider');
//スライダーに input イベントを設定
delay_slider.addEventListener('input', (e) => {
  //変更された delay を使ってタイミングプロパティを作成
  const timing = {
    duration: 3000,
    fill: 'forwards',
    delay: e.currentTarget.value,
  };
  //タイミングプロパティを変更
  animation.effect.updateTiming(timing);
  //この時点での currentTime と delay を出力
  output.innerText = 'animation.currentTime : ' + animation.currentTime + "\n" + 'delay: ' + animation.effect.getComputedTiming().delay;
})

//共通のキーフレーム
const frames = [
  { transform: 'translateX(0px)' },
  { transform: 'translateX(300px)' },
];
//共通のタイミングプロパティ
const timings = {
  duration: 1000,
  iterations: Infinity,
  direction: 'alternate',
  fill: 'forwards',
  delay: 0,
  easing: 'ease-in-out'
};
//1つ目のアニメーションを作成して自動再生を停止
const animation1 = document.getElementById('target1').animate(frames, timings);
animation1.cancel();
//2つ目のアニメーションを作成して自動再生を停止
const animation2 = document.getElementById('target2').animate(frames, timings);
animation2.cancel();

//2つのアニメーションを配列に格納
const animations = [animation1, animation2];

//Start ボタンにクリックイベントを設定
document.getElementById('start').addEventListener('click', (e) => {
  //一時停止後の再生でない場合は2つ目のアニメーションの currentTime を変更
  if(animation2.playState !== 'paused') {
    const rand = Math.random();
    //2つ目のアニメーションの currentTime を変更
    animation2.currentTime = 500 * rand;
  }
  //2つのアニメーションを再生
  animations.forEach( (animation) => {
    animation.play();
  });
});

document.getElementById('sync').addEventListener('click', (e) => {
  //2つのアニメーションの currentTime を同じ値に
  animation2.currentTime = animation1.currentTime;
});
document.getElementById('randomize').addEventListener('click', (e) => {
  const rand = Math.random();
  //2つ目のアニメーションの currentTime を変更（ずらす）
  animation2.currentTime = animation1.currentTime + (500 * rand);
});
document.getElementById('pause').addEventListener('click', (e) => {
  animations.forEach( (animation) => {
    animation.pause();
  });
});
document.getElementById('cancel').addEventListener('click', (e) => {
  animations.forEach( (animation) => {
    animation.cancel();
  });
});

<div id="target"></div>
currentTime <!--input 要素の max 属性は Javascript で endTime の値を設定-->
<input type="range" id="ct_slider" min="0" value="0" step="1">
<span id="ct_slider_span">0</span>

<script>
  const target = document.getElementById('target');
  //animate() でアニメーションを作成
  const animation = target.animate(
    [
      { transform: 'translateX(0px)', backgroundColor: '#85A0F5' },
      { transform: 'translateX(300px)' , backgroundColor: 'pink' },
    ],
    {
      duration: 3000,
      delay: 500,
      fill: 'forwards'
    }
  );
  //自動再生を停止
  animation.cancel();

  //currentTime の値を変更するスライダー（input type="range"）
  const ct_slider = document.getElementById('ct_slider');

  //タイミングプロパティ（オブジェクト）を取得
  const timing = animation.effect.getComputedTiming();
  //スライダー（input type="range"）の max 属性に endTime プロパティの値を設定
  ct_slider.setAttribute('max', timing.endTime );

  //スライダーに input イベントを設定
  ct_slider.addEventListener('input', (e) => {
    //アニメーションの currentTime にスライダーの値を設定
    animation.currentTime = e.currentTarget.value;
    //スライダーの値を出力
    document.getElementById('ct_slider_span').textContent = e.currentTarget.value;
  });
</script>

//startTime の値を取得（Animation は Animation オブジェクト）
var startTime = Animation.startTime;

//1秒後に再生開始
Animation.startTime = Animation.timeline.currentTime + 1000;

<div id="target1"></div>
<div id="target2"></div>
<div id="target3"></div>
<button type="button" id="set">Set</button>
<button type="button" id="cancel">Cancel</button>
<div id="output"></div>
<script>
//キーフレーム
const frames = [
  { transform: 'translateX(0px)' },
  { transform: 'translateX(300px)' },
];
//タイミングプロパティ
const timing = {
  duration: 2000,
  direction: 'alternate',
  iterations: Infinity,
};
//それぞれの要素に上記キーフレームとタイミングプロパティを使ってアニメーションを設定
const animation1 = document.getElementById('target1').animate(frames, timing);
const animation2 = document.getElementById('target2').animate(frames, timing);
const animation3 = document.getElementById('target3').animate(frames, timing);
const animations = [animation1, animation2, animation3];
//全てのアニメーションの自動再生を停止
animations.forEach((animation) => {
  animation.cancel();
});

const output = document.getElementById('output');
//タイムラインの現在の値とそれぞれの startTime を出力する関数
const printStartTimes = () => {
  output.innerText = 'animation1.timeline.currentTime: ' + animation1.timeline.currentTime + "\n" +
  'animation1.startTime: ' + animation1.startTime + "\n" +
  'animation2.startTime: ' + animation2.startTime + "\n" +
  'animation3.startTime: ' + animation3.startTime + "\n";
}
printStartTimes();

document.getElementById('set').addEventListener('click', (e) => {
  //過去の時刻（1秒前）を設定
  animation1.startTime = animation1.timeline.currentTime - 1000;
  //現在の時刻を設定（この場合 animation2.play(); と同じ）
  animation2.startTime = animation1.timeline.currentTime;
  //未来の時刻（1秒後）を設定
  animation3.startTime = animation1.timeline.currentTime + 1000;
  //クリックした時点のタイムラインの値とそれぞれの startTime を出力
  printStartTimes();
});

document.getElementById('cancel').addEventListener('click', (e) => {
  //全てのアニメーションを停止
  animations.forEach((animation) => {
    animation.cancel();
  });
  printStartTimes();
});
</script>

<div id="target">
  <div></div>
  <div></div>
  <!-- 中略（合計20個 の div 要素） -->
  <div></div>
  <div></div>
</div>
<button type="button" id="play">Play</button>
<button type="button" id="pause">Pause</button>
<button type="button" id="cancel">Cancel</button>

#target {
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  background-color: #111;
}
#target div {
  width: 20px;
  height: 10px;
  background-color: #111;
}

//対象の要素を全て取得して NodeList から配列に変換
const targets = Array.from(document.querySelectorAll('#target div'));
//または Array.prototype.slice.call(document.querySelectorAll('#target div'));

//タイミングプロパティの元となる設定
let timings = {
  easing: 'ease-in-out',
  iterations: Infinity,
  direction: 'alternate',
  fill: 'both'
}

//生成した各アニメーションを代入する変数
let animation1, animation2, animation3;

//生成したアニメーションを格納する配列
const animations = [];

//対象の要素のそれぞれについて animate() でアニメーションを設定
targets.forEach((elem, i) => {
  //delay の値はインデックスを利用（少しずつずらして開始）
  timings.delay = i * 98;
  //アニメーションの持続時間
  timings.duration = 2500;

  //1つ目のアニメーションを設定
  animation1 = elem.animate([
    {transform: 'translateY(0) scaleX(.8)'},
    {transform: 'translateY(290px) scaleX(1)'}
  ], timings);
  //自動再生を停止
  animation1.cancel();
  //生成したアニメーションを配列に追加
  animations.push(animation1);

  //２つ目のアニメーションを設定
  timings.duration = 2000;
  animation2 = elem.animate([
    {opacity: 1},
    {opacity: 0}
  ], timings);
  animation2.cancel();
  animations.push(animation2);

  //３つ目のアニメーションを設定
  timings.duration = 3000;
  animation3 = elem.animate([
    {backgroundColor: '#fff'},
    {backgroundColor: '#F32F03'}
  ], timings);
  animation3.cancel();
  animations.push(animation3);
});

//ボタンにクリックイベントを設定
document.getElementById('play').addEventListener('click', () => {
  //それぞれのアニメーションに対してメソッドを実行
 animations.forEach((anim) => {
   anim.play();
 });
});
document.getElementById('pause').addEventListener('click', () => {
  animations.forEach((anim) => {
   anim.pause();
 });
});
document.getElementById('cancel').addEventListener('click', () => {
  animations.forEach((anim) => {
   anim.cancel();
 });
}); 

<div id="target"></div><!--アニメーション対象の要素-->

#target {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: palevioletred;
  margin: 20px 0;
}

//キーフレーム
const frames = [
  { transform: 'translateX(0px)' },
  { transform: 'translateX(300px)' },
];
//タイミング
const timing = {
  duration: 1000,
  direction: 'alternate',
  iterations: Infinity,
  easing: 'ease-out',
};
//アニメーション対象の要素
const target =  document.getElementById('target');
//Animation オブジェクトを生成
const animation = target.animate(frames, timing);
//アニメーションの自動再生を停止
animation.cancel();

//オブザーバーのオプション
const options = {
  //対象の要素が画面上に見えてから100pxを超えたら
  rootMargin: '-100px 0px',
  //対象の要素の全体が表示されたら
  threshold: 1
}

//オブザーバーのコールバック関数
const callback = (entries) => {
  entries.forEach( (entry) => {
    //対象の要素が画面上に見えたら
    if (entry.isIntersecting) {
      //アニメーションを再生
      animation.play();
    } else { //対象の要素が画面上から見えなくなった場合
      //アニメーションを一時停止
      animation.pause();
      //animation.cancel();
    }
  });
}
//オブザーバーを生成
const observer = new IntersectionObserver(callback, options);
//対象の要素をオブザーバーに監視するように指定
observer.observe(target); 

const observer = new IntersectionObserver(
  //コールバック関数
  (entries) => {
    if (entries[0].isIntersecting) {
      animation.play();
    } else {
      animation.pause();
    }
  },
  //オプション
  {
    rootMargin: '-100px 0px',
    threshold: 1
  }
);

const toggleImgAnim = document.querySelectorAll('.toggle-img-anim');

toggleImgAnim.forEach((elem) => {
  // アニメーションが実行中かどうかを判定するフラグ
  let isAnimating = false;
  let isShown = true;
  const toggleBtn = elem.querySelector('.toggle-btn');
  const imgWrapper = elem.querySelector('.toggle-img-wrapper');
  const img = imgWrapper.querySelector('img');

  toggleBtn.addEventListener('click', () => {
    // アニメーション中の場合はリターン（何もしない）
    if (isAnimating === true) {
      return;
    }
    if (isShown) {
      // アニメーション中とする
      isAnimating = true;
      const hide = imgWrapper.animate(
        {
          opacity: [1, 0],
          height: [img.offsetHeight + 'px', 0],
        },
        timingOpts
      );
      hide.onfinish = () => {
        isShown = false;
        toggleBtn.textContent = 'Show Image';
        // アニメーション終了とする
        isAnimating = false;
      }
    } else {
      // アニメーション中とする
      isAnimating = true;
      const show = imgWrapper.animate(
        {
          opacity: [0, 1],
          height: [0, img.offsetHeight + 'px'],
        },
        timingOpts
      );
      show.onfinish = () => {
        isShown = true;
        toggleBtn.textContent = 'Hide Image';
        // アニメーション終了とする
        isAnimating = false;
      }
    }
  });

  const timingOpts = {
    duration: 300,
    easing: 'ease-in',
    fill: 'forwards'
  };
});

const toggleImgAnim = document.querySelectorAll('.toggle-img-anim');

toggleImgAnim.forEach((elem) => {
  let isShown = true;
  const toggleBtn = elem.querySelector('.toggle-btn');
  //アニメーションの対象の要素 .toggle-img-wrapper
  const imgWrapper = elem.querySelector('.toggle-img-wrapper');
  const img = imgWrapper.querySelector('img');

  toggleBtn.addEventListener('click', () => {
    // アニメーション中の場合はリターン（何もしない）
    if (imgWrapper.dataset.isAnimating === 'true') {
      return;
    }
    if (isShown) {
      // アニメーション中とする（カスタム属性を dataset プロパティで設定）
      imgWrapper.dataset.isAnimating = 'true';
      const hide = imgWrapper.animate(
        {
          opacity: [1, 0],
          height: [img.offsetHeight + 'px', 0],
        },
        timingOpts
      );
      hide.onfinish = () => {
        isShown = false;
        toggleBtn.textContent = 'Show Image';
        // アニメーション終了とする
        imgWrapper.dataset.isAnimating = 'false';
      }
    } else {
      // アニメーション中とする
      imgWrapper.dataset.isAnimating = 'true';
      const show = imgWrapper.animate(
        {
          opacity: [0, 1],
          height: [0, img.offsetHeight + 'px'],
        },
        timingOpts
      );
      show.onfinish = () => {
        isShown = true;
        toggleBtn.textContent = 'Hide Image';
        // アニメーション終了とする
        imgWrapper.dataset.isAnimating = 'false';
      }
    }
  });

  const timingOpts = {
    duration: 300,
    easing: 'ease-in',
    fill: 'forwards'
  };
});

// Debounce 関数の定義
function debounce_leading(func, timeout = 300) {
  let timer;
  return function(...args) {
    if (!timer) {
      func.apply(this, args);
    }
    clearTimeout(timer);
    timer = setTimeout(() => {
      timer = undefined;
    }, timeout);
  };
}

const toggleImgAnim = document.querySelectorAll('.toggle-img-anim');

toggleImgAnim.forEach((elem) => {
  let isShown = true;
  const toggleBtn = elem.querySelector('.toggle-btn');
  const imgWrapper = elem.querySelector('.toggle-img-wrapper');
  const img = imgWrapper.querySelector('img');

// リスナーを debounce_leading() でラップ
toggleBtn.addEventListener('click',debounce_leading( () => {
  if (isShown) {
    const hide = imgWrapper.animate(
      {
        opacity: [1, 0],
        height: [img.offsetHeight + 'px', 0],
      },
      timingOpts
    );
    hide.finished.then( () => {
      isShown = false;
      toggleBtn.textContent = 'Show Image';
    });
  } else {
    const show = imgWrapper.animate(
      {
        opacity: [0, 1],
        height: [0, img.offsetHeight + 'px'],
      },
      timingOpts
    );
    show.finished.then( () => {
      isShown = true;
      toggleBtn.textContent = 'Hide Image';
    });
  }
}, 300)); // timeout（待機時間）を指定
  const timingOpts = {
    duration: 300,
    easing: 'ease-in',
    fill: 'forwards'
  };
});

#target{
  animation: cssAnimation 1s linear 0s 4 forwards;
}
@keyframes cssAnimation {
  0% {
    transform: translateX(0px);
    background-color:  #85A0F5;
  }
  100% {
    transform: translateX(300px);
    background-color:  pink;
  }
} 

<div id="target"></div>
<button type="button" id="play">Play</button>
<button type="button" id="pause">Pause</button>
<button type="button" id="reverse">Reverse</button>
<button type="button" id="cancel">Cancel</button>
<div id="output"></div>
<p id="iterationCount"></p>

//アニメーションが設定されている要素を取得
const target = document.getElementById('target');
//要素に設定されている CSS アニメーションを取得（配列なので最初の要素を取得）
const animation = target.getAnimations()[0];
//アニメーションの自動再生を停止
animation.cancel();

//ボタンの要素にクリックイベントを設定して操作
document.getElementById('play').addEventListener('click', () => {
  animation.play(); //再生
});
document.getElementById('pause').addEventListener('click', () => {
  animation.pause(); //一時停止
});
document.getElementById('reverse').addEventListener('click', () => {
  animation.reverse(); //逆方向に再生
});
document.getElementById('cancel').addEventListener('click', () => {
  animation.cancel(); //停止（キャンセル）
});

//メッセージの出力先
const output = document.getElementById('output');
//繰り返し回数を入れる変数
const iterationCountText = document.getElementById('iterationCount');
//繰り返し回数の初期値
let iterationCount = 0;

//HTMLElement の animationstart イベントにリスナーを登録
target.addEventListener('animationstart', () => {
  output.textContent = 'アニメーション開始';
});

//HTMLElement の animationiteration イベントにリスナーを登録
target.addEventListener('animationiteration', () => {
  iterationCount++; //繰り返し回数を増加
  iterationCountText.textContent = `${iterationCount} 回終了`;
});

//HTMLElement の animationend イベントにリスナーを登録
target.addEventListener('animationend', () => {
  output.textContent = 'アニメーション終了';
});

//HTMLElement の animationcancel イベントにリスナーを登録
target.addEventListener('animationcancel', () => {
  output.textContent = 'アニメーションが取り消されました';
});

//Animation オブジェクトの finish イベントにリスナーを登録
animation.addEventListener('finish', (e) => {
  iterationCount = 0;
  iterationCountText.textContent = '';
});

//Animation オブジェクトの cancel イベントにリスナーを登録
animation.addEventListener('cancel', (e) => {
  iterationCount = 0;
  iterationCountText.textContent = '';
});