<h1>
  Click around!
</h1>
<h2>
  Crossfade demo works in Chrome 84+
</h2>
<div id="box"></div>

body {
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  padding: 0;
  margin: 0;
}

#box,
.block {
  border-radius: 10px;
  background: lightpink;
  height: 100px;
  width: 100px;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 700ms ease-in-out;
}

h1,
h2 {
  font-family: system-ui, serif;
  text-align: right;
  margin: 2rem;
}

h2 {
  font-size: 1rem;
}

// Demo by Kevin Ellis
// https://codepen.io/kevers-google/full/NWGVBKv

const box = document.getElementById("box");
document.body.onclick = (evt) => {
  box.style.transform = `translateX(${evt.clientX - 50}px) translateY(${
    evt.clientY - 50
  }px)`;
};

box.addEventListener("transitionrun", (evt) => {
  if (evt.propertyName !== "transform") return;
  const transition = evt.target
    .getAnimations()
    .find((anim) => anim.transitionProperty === "transform");
  const keyframes = transition.effect.getKeyframes();
  const boxCopy = document.createElement("div");
  boxCopy.classList.add("block");
  document.body.appendChild(boxCopy);
  boxCopy.style.transform = keyframes[0].transform;
  const duration = transition.effect.getTiming().duration;
  box.animate({ opacity: [0, 1] }, { duration: duration, easing: "ease-in" });
  boxCopy
    .animate(
      { opacity: [1, 0] },
      { duration: duration, easing: "ease-out", fill: "forwards" }
    )
    .finished.then(() => {
      document.body.removeChild(boxCopy);
    });
});