<button class="button is-primary run">Run</button>

<div id="shape"/>

<svg>
  <defs>
    <clipPath id="circles">
      <circle cx="25" cy="10" r="10"/>
      <circle cx="10" cy="40" r="10"/>
      <circle cx="40" cy="40" r="10"/>
    </clipPath>
    
    <clipPath id="circle">
      <circle cx="25" cy="25" r="20"/>

    </clipPath>
  </defs>
</svg>
#shape {
  width: 50px;
  height: 50px;
  background-color: #4527a0;
  clip-path: url(#circles);
  margin: 1em;
}

.run {
  margin: 2em;
}
const shape = document.querySelector('#shape');

const moveXAnimation = {
  transform: ['translateX(0px)', 'translateX(600px) rotate(720deg)']
};

const moveYAnimation = {
  transform: ['translateY(0px)', 'translateY(600px) rotate(720deg)']
};

const runBtn = document.querySelector('.run');

runBtn.addEventListener('click', () => {
  shape.animate(moveXAnimation, 2000).finished.then(() => {
    shape.animate(moveYAnimation, 2000);
});
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations.min.js