<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;
}

.animated {
  animation: moveX 2s ease-in-out, moveY 2s 2s;
}

@keyframes moveX {
  0% {
    background-color: #006064;
  }
  
  50% {
    transform: translateX(600px) rotate(360deg);
  }
}

@keyframes moveY {
  0% {
    background-color: #006064;
  }
  
  50% {
    transform: translateY(600px) rotate(360deg);
  }
}
const shape = document.querySelector("#shape");

shape.addEventListener("click", () => {
  shape.classList.remove("animated");
  
  setTimeout(() => {
    shape.classList.add("animated")
  }, 1);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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