<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,
},
);
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.