body {
  background: #ffeecc;
}

.scene {
  height: 150px;
  width: 150px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10%;
  -webkit-transform: rotate(45deg);
}

.scene div {
  height: 75px;
  width: 75px;
  position: absolute;
  border-radius: 50%;
  -webkit-animation: 4s anim infinite ease;
}

#num1 {
  left: 0;
  top: 0;
  background: #ff4455;
}

#num2 {
  left: 75px;
  top: 0;
  background: #33bb55;
  -webkit-animation-delay: -1s;
}

#num3 {
  left: 0;
  top: 75px;
  background: #ffdd00;
  -webkit-animation-delay: -2s;
}

#num4 {
  left: 75px;
  top: 75px;
  background: #33aaff;
  -webkit-animation-delay: -3s;
}

@-webkit-keyframes anim {
  0% {
    left: 0;
    top: 0;
    z-index: 4;
  }
  25% {
    left: 0;
    top: 75px;
    z-index: 3;
  }
  50% {
    left: 75px;
    top: 75px;
    z-index: 2;
  }
  75% {
    left: 75px;
    top: 0;
    z-index: 1;
  }
  100% {
    left: 0;
    top: 0;
  }
}