<button id="start">開始</button>
<div class="animation-area">
  <img id="image" src="https://raw.githubusercontent.com/bpeldi2oerkd8/assets/main/images/site-icon.png" width="50" height="50" alt="site-logo">
</div>
.animation-area {
  margin-top: 1rem;
}
const start = document.getElementById('start'); // 開始ボタン
const image = document.getElementById('image'); // ロゴ画像

// スタートボタンをクリックしたら
start.addEventListener('click', () => {
  // 画像を左端から200px右に動かす
  image.animate(
    // 途中の状態を表す配列
    [
      { transform: 'translateX(0)'}, // 開始時の状態(左端)
      { transform: 'translateX(200px)' } // 終了時の状態(左端から200pxの位置)
    ], 
    // タイミングに関する設定
    {
      fill: 'backwards', // 再生前後の状態(再生前、開始時の状態を適用)
      duration: 1000, // 再生時間(1000ミリ秒)
    },
  );
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.