@-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); } }

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

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

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

.cube-transition {
  position: relative;
  -webkit-transform: translate(25px, -25px);
     -moz-transform: translate(25px, -25px);
      -ms-transform: translate(25px, -25px);
       -o-transform: translate(25px, -25px);
          transform: translate(25px, -25px); }
  .cube-transition > div {
    -webkit-animation-fill-mode: both;
       -moz-animation-fill-mode: both;
         -o-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;
       -moz-animation: cube-transition 1.6s 0s infinite ease-in-out;
         -o-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;
         -moz-animation-delay: -0.8s;
           -o-animation-delay: -0.8s;
              animation-delay: -0.8s; }
