.scene {
  width: 10rem;
  height: 10rem;
  perspective: 25rem;
  margin: 6.8rem auto;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: rotation 5.33s linear infinite; /*2.66s 5.33s 10.66s*/
  animation-timing-function: linear;
}

.face {
  position: absolute;
  width: 10rem;
  height: 10rem;
  background: #eee;
  
  display: flex;
  justify-content: center;
  align-items: center;

  /* margin: auto;
  text-align: center;
  vertical-align:middle; */

  border: 1px solid #fff;
  font-size: 2rem;
  text-align: center;
}

.a_jump {
  animation: jump 1s linear infinite; /*2.66s 5.33s 10.66s*/
  animation-timing-function: linear;
}

/* Cube face positions */
.front  { transform: translateZ(5rem); }
/* .front2  { transform: translateZ(300px); scale: 4; opacity: 0.5;} */
.back   { transform: rotateY(180deg) translateZ(5rem); }
.right  { transform: rotateY(90deg)  translateZ(5rem); }
.left   { transform: rotateY(-90deg) translateZ(5rem); }
.top    { transform: rotateX(90deg)  translateZ(5rem) rotateZ(90deg); }
.bottom { transform: rotateX(-90deg) translateZ(5rem) rotateZ(90deg); }

@keyframes rotation {
    0% { transform: rotateX(0deg) rotateY(0deg); animation-timing-function: ;}
   31% { transform: rotateX(-60deg) rotateY(90deg); animation-timing-function: ;}
   50% { transform: rotateX(0deg) rotateY(180deg); animation-timing-function: ;}
   81% { transform: rotateX(60deg) rotateY(270deg); animation-timing-function: ;}
  100% { transform: rotateX(0deg) rotateY(360deg); animation-timing-function: ;}
}

@keyframes jump {
    0% { transform: translateY(0px); animation-timing-function: ;}
   50% { transform: translateY(-50px); animation-timing-function: ;}
  100% { transform: translateY(0px); }
}


@keyframes pulse {
    0% { background-color: rgba(238,238,238,1);}
   50% { background-color: rgba(238,238,238,0);}
  100% { background-color: rgba(238,238,238,1);}
}