<div class="animation-area">
  <img id="image" src="https://drive.google.com/uc?export=view&id=1FiOWtMk0oi6tsgKD_lIUNX_M_dBQ0jf1" width="50" height="50" alt="site-logo">
</div>
.animation-area {
  margin-top: 1rem;
}
const image = document.getElementById('image'); // ロゴ画像

// 画像を左端から200px右に動かす
image.animate(
// 途中の状態を表す配列
  [
    { transform: 'translateX(0)'}, // 開始時の状態(左端)
    { transform: 'translateX(200px)' } // 終了時の状態(左端から200pxの位置)
  ], 
  // タイミングに関する設定
  {
    fill: 'backwards', // 再生前後の状態(再生前、開始時の状態を適用)
    duration: 1000, // 再生時間(1000ミリ秒)
    iterations: Infinity,  // アニメーションの繰り返し回数(ずっと繰り返す)
  },
);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.