@-webkit-keyframes cube-transition {
  25% {
    -webkit-transform : translateX(-50px) scale(0.5) rotate(90deg);
            transform : translateX(-50px) scale(0.5) rotate(90deg);
  }
  50% {
    -webkit-transform : translate(-50px, 50px) rotate(180deg);
            transform : translate(-50px, 50px) rotate(180deg);
  }
  75% {
    -webkit-transform : translateY(50px) scale(0.5) rotate(270deg);
            transform : translateY(50px) scale(0.5) rotate(270deg);
  }
  100% {
    -webkit-transform : rotate(360deg);
            transform : rotate(360deg);
  }
}

@keyframes cube-transition {
  25% {
    -webkit-transform : translateX(-50px) scale(0.5) rotate(90deg);
            transform : translateX(-50px) scale(0.5) rotate(90deg);
  }
  50% {
    -webkit-transform : translate(-50px, 50px) rotate(180deg);
            transform : translate(-50px, 50px) rotate(180deg);
  }
  75% {
    -webkit-transform : translateY(50px) scale(0.5) rotate(270deg);
            transform : translateY(50px) scale(0.5) rotate(270deg);
  }
  100% {
    -webkit-transform : rotate(360deg);
            transform : rotate(360deg);
  }
}

.cube-transition {
  position : relative;
  -webkit-transform : translate(25px, -25px);
      -ms-transform : translate(25px, -25px);
          transform : translate(25px, -25px);
}
.cube-transition > div {
  -webkit-animation-fill-mode : both;
          animation-fill-mode : both;
  width : 10px;
  height : 10px;
  position : absolute;
  top : -5px;
  right : -5px;
  background-color : #6B6F82;
  -webkit-animation : cube-transition 1.6s 0s infinite ease-in-out;
          animation : cube-transition 1.6s 0s infinite ease-in-out;
}
.cube-transition > div:last-child {
  -webkit-animation-delay : -0.8s;
          animation-delay : -0.8s;
}