<div id="animate"></div>
<button id="btn">animate</button>
#animate {
width: 100px;
height: 100px;
position: absolute;
top: 100px;
left: 400px;
background: darkblue;
}
const btn = document.getElementById('btn');
const animateBox = document.getElementById('animate');
const animation = () => {
animateBox.animate({
top: ['100px', '30px', '30px'],
left: [ '400px', '50px', '50px'],
opacity: [ 1, 1, 0 ],
offset: [ 0, 0.9875, 1 ]
}, {
duration: 8000,
fill: "forwards",
});
}
btn.addEventListener('click', animation)
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.