<button id="start">開始</button>
<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 start = document.getElementById('start'); // 開始ボタン
const image = document.getElementById('image'); // ロゴ画像

// スタートボタンをクリックしたら
start.addEventListener('click', () => {
  // 画像を時計回りに1回転させる
  image.animate(
    // 途中の状態を表す配列
    [
      { transform: 'rotate(0deg)' }, // 開始時の状態（0度）
      { transform: 'rotate(360deg)' } // 終了時の状態（360度）
    ], 
    // タイミングに関する設定
    {
      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.