<button id="start">開始</button>
<div class="animation-area">
  <img id="bookshelf" width="100" src="https://raw.githubusercontent.com/bpeldi2oerkd8/assets/main/images/bookshelf.jpg" alt="本棚">
</div>
button {
  width: 50px;
  height: 25px;
}

.animation-area {
  margin-top: 10px; /*上に空白を入れる*/
}
const start = document.getElementById('start');
const bookshelf = document.getElementById('bookshelf');

start.addEventListener('click', () => {
  bookshelf.animate(
    [
      { transform: "translateX(0)"},
      { transform: "translateX(200px)" }
    ], 
    {
      duration: 1000,
    },
  );
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.