<div class="container">
  <div class="box fill">Get the element's background colour and store it.</div>
  <div class="box fill">Set the element's background colour to transparent.</div>
  <div class="box fill">Add a child element with the stored background colour.</div>
  <div class="box fill">Animate in the child element, in any way you can imagine.</div>
</div>

body {
  align-items:center;
  background-color:#ccc;
  background-image:radial-gradient(#fff, #ccc);
  display:flex;
  font-family:sans-serif;
  height:100vh;
  justify-content:center;
  margin:0;
}

.container {
  display:flex;
  flex-wrap:wrap;
  width:64vmin;
  .box {
    align-items:center;
    background-color:#fff;
    box-sizing:border-box;
    display:flex;
    font-size:4vmin;
    height:30vmin;
    justify-content:center;
    margin:1vmin;
    padding:3vmin;
    width:30vmin;
    &:nth-child(1) {
      background-color:#f69;
    }
    &:nth-child(2) {
      background-color:#ee0;
    }
    &:nth-child(3) {
      background-color:#6c3;
    }
    &:nth-child(4) {
      background-color:#6cf;
    }
  }
}

/* fill styles */

.fill-layer {
  animation:fill 1s ease-in-out;  
  bottom:0;
  left:0;
  position:absolute;
  right:0;
  top:0;
  z-index:-1;
}

@keyframes fill {
  0% {
    border-radius:50%;
    transform:translateY(150%) translateX(150%) scale(2);
  }
  100% {
    border-radius:50%;
    transform:scale(2);
  }
}

const elements = Array.from(document.querySelectorAll('.fill'));

function fill(item, index) {
  
  const bgColor = getComputedStyle(item).backgroundColor,
  fillLayer = document.createElement('div');
  fillLayer.classList.add('fill-layer');
  item.style.backgroundColor = 'transparent';
  item.style.position = 'relative';
  item.style.overflow = 'hidden';
  setTimeout(function() {
    fillLayer.style.backgroundColor = bgColor;  
    item.appendChild(fillLayer);
  }, index * 1000);
  
}

elements.forEach(fill);