<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 = new KeyframeEffect(
  shape,
  {
    transform: ['translateX(0px)', 'translateX(600px) rotate(720deg)']
  },
  {
    duration: 2000
  }
);

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

const animations = [
  new Animation(moveXAnimation, document.timeline),
  new Animation(moveYAnimation, document.timeline)
];

Element.prototype.chainAnimate = (animations) => {
  for (let i = 0; i < animations.length - 1; i++) {
    animations[i].addEventListener(
      'finish',
      () => { animations[i + 1].play() },
      { once: true }
    );
  }
  
  animations[0].play();
}

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

runBtn.addEventListener('click', () => {
  shape.chainAnimate(animations);
});

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