<div class="square main" onclick="divide($(this));" >
   Click & Divide Them
</div>
* {
  box-sizing: border-box;
  border-width: 0px;
  padding: 0;
  margin: 0;
}
.square.main{
    width: 100vw;
    height: 100vh;
    position: relative;
    text-align: center;
    line-height: 130px;
    color: white;
    font-size: 7vw;
   box-sizing: border-box;
    padding-top: 35vh;
}
.square{
    bborder-radius: 50%;
    background: gray;
    transition: background 0.5s;
}
.square.transparent{
  background-color: transparent !important;
  animation-name: none;
}
.square > .square{
    position: absolute;
   -webkit-animation: shrink 1s forwards; /* Chrome, Safari, Opera */
    animation: shrink 1s forwards;
    opacity: 0;
}

@-webkit-keyframes shrink {
    from {-webkit-transform: scale(2)}
    to {-webkit-transform: scale(1); opacity: 1;}
}

.square > .square:nth-child(1){
    left: 0%;
    right: 50%;
    top: 0%;
    bottom: 50%;
  -webkit-transform-origin: top left;
  transform-origin: top left;
}
.square > .square:nth-child(2){
    left: 50%;
    right: 0%;
    top: 0%;
    bottom: 50%;
  -webkit-transform-origin: top right;
  transform-origin: top right;
}
.square > .square:nth-child(3){
    left: 0%;
    right: 50%;
    top: 50%;
    bottom: 0%;
  -webkit-transform-origin: bottom left;
  transform-origin: bottom left;
}
.square > .square:nth-child(4){
    left: 50%;
    right: 0%;
    top: 50%;
    bottom: 0%;
  -webkit-transform-origin: bottom right;
  transform-origin: bottom right;
}
function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
  
    return color;
}

function divide(e) {
  for(i=1; i<=4; i++) {
    e.append('<div class="square" onclick="divide($(this));" style="background:'+getRandomColor()+'" ></div>');
  }
  e.addClass('transparent');
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js