<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)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.