<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', () => {
  // 画像を上部から100px下に動かす
  image.animate(
    // 途中の状態を表す配列
    [
      { transform: 'translateY(0)'}, // 開始時の状態（上部）
      { transform: 'translateY(100px)' } // 終了時の状態（上部から100px下の位置）
    ], 
    // タイミングに関する設定
    {
      fill: 'backwards', // 再生前後の状態（再生前、開始時の状態を適用）
      duration: 500, // 再生時間（500ミリ秒）
    },
  );
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.