.cube-animation .cube.cubeOn {
  animation-name: cube-animation_cube;
}
.cube-animation .cubeOn .cubie.front.right.up {
  animation-name: cube-animation_front_right_up;
}
.cube-animation .cubeOn .cubie.front.left.up {
  animation-name: cube-animation_front_left_up;
}
.cube-animation .cubeOn .cubie.front.right.down {
  animation-name: cube-animation_front_right_down;
}
.cube-animation .cubeOn .cubie.front.left.down {
  animation-name: cube-animation_front_left_down;
}
.cube-animation .cubeOn .cubie.back.right.up {
  animation-name: cube-animation_back_right_up;
}
.cube-animation .cubeOn .cubie.back.left.up {
  animation-name: cube-animation_back_left_up;
}
.cube-animation .cubeOn .cubie.back.right.down {
  animation-name: cube-animation_back_right_down;
}
.cube-animation .cubeOn .cubie.back.left.down {
  animation-name: cube-animation_back_left_down;
}
.cube-animation .cubeOn .cubie.front.up {
  animation-name: cube-animation_front_up;
}
.cube-animation .cubeOn .cubie.front.left {
  animation-name: cube-animation_front_left;
}
.cube-animation .cubeOn .cubie.front.right {
  animation-name: cube-animation_front_right;
}
.cube-animation .cubeOn .cubie.front.down {
  animation-name: cube-animation_front_down;
}
.cube-animation .cubeOn .cubie.back.up {
  animation-name: cube-animation_back_up;
}
.cube-animation .cubeOn .cubie.back.left {
  animation-name: cube-animation_back_left;
}
.cube-animation .cubeOn .cubie.back.right {
  animation-name: cube-animation_back_right;
}
.cube-animation .cubeOn .cubie.back.down {
  animation-name: cube-animation_back_down;
}
.cube-animation .cubeOn .cubie.left.up {
  animation-name: cube-animation_left_up;
}
.cube-animation .cubeOn .cubie.right.up {
  animation-name: cube-animation_right_up;
}
.cube-animation .cubeOn .cubie.left.down {
  animation-name: cube-animation_left_down;
}
.cube-animation .cubeOn .cubie.right.down {
  animation-name: cube-animation_right_down;
}
.cube-animation .cubeOn .cubie.front {
  animation-name: cube-animation_front;
}
.cube-animation .cubeOn .cubie.back {
  animation-name: cube-animation_back;
}
.cube-animation .cubeOn .cubie.left {
  animation-name: cube-animation_left;
}
.cube-animation .cubeOn .cubie.right {
  animation-name: cube-animation_right;
}
.cube-animation .cubeOn .cubie.up {
  animation-name: cube-animation_up;
}
.cube-animation .cubeOn .cubie.down {
  animation-name: cube-animation_down;
}

/* 0 | 16.67% | 33.33% | 66.67% | 83.33% | 100%*/

@keyframes cube-animation_cube {
  0% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}

/* front right up = red blue white */
@keyframes cube-animation_front_right_up {
  0% {
    transform: rotateX(0deg);
  }
  16.67% {
    transform: rotateX(0deg) rotateY(0deg) rotateX(90deg);
  }
  33.33% {
    transform: rotateX(0deg) rotateY(90deg) rotateX(90deg);
  }
  50% {
    transform: rotateX(-90deg) rotateY(90deg) rotateX(90deg);
  }
  100% {
    transform: rotateX(-90deg) rotateY(90deg) rotateX(90deg);
  }
}

/* front left up = red green white */
@keyframes cube-animation_front_left_up {
  0% {
    transform: rotateZ(0deg) rotateY(0deg);
  }
  16.67% {
    transform: rotateZ(0deg) rotateY(0deg);
  }
  33.33% {
    transform: rotateZ(0deg) rotateY(90deg);
  }
  66.67% {
    transform: rotateZ(0deg) rotateX(0deg) rotateY(90deg);
  }
  83.33% {
    transform: rotateZ(0deg) rotateX(90deg) rotateY(90deg);
  }
  100% {
    transform: rotateZ(90deg) rotateX(90deg) rotateY(90deg);
  }
}

/* front right down = red blue yellow */
@keyframes cube-animation_front_right_down {
  0% {
    transform: rotateZ(0deg) rotateX(0deg);
  }
  16.67% {
    transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg) rotateX(90deg);
  }
  33.33% {
    transform: rotateZ(0deg) rotateX(0deg) rotateY(90deg) rotateX(90deg);
  }
  66.67% {
    transform: rotateZ(0deg) rotateX(0deg) rotateY(90deg) rotateX(90deg);
  }
  83.33% {
    transform: rotateZ(0deg) rotateX(90deg) rotateY(90deg) rotateX(90deg);
  }
  100% {
    transform: rotateZ(90deg) rotateX(90deg) rotateY(90deg) rotateX(90deg);
  }
}

/* front left down = red green yellow */
@keyframes cube-animation_front_left_down {
  0% {
  }
  16.67% {
  }
  33.33% {
    transform: rotateX(0deg);
  }
  50% {
    transform: rotateY(0deg) rotateX(-90deg);
  }
  66.67% {
    transform: rotateY(90deg) rotateX(-90deg);
  }
  100% {
    transform: rotateY(90deg) rotateX(-90deg);
  }
}

/* back right up = orange blue white */
@keyframes cube-animation_back_right_up {
  0% {
    transform: rotateX(0deg);
  }
  16.67% {
    transform: rotateX(90deg);
  }
  33.33% {
    transform: rotateX(90deg);
  }
  50% {
    transform: rotateZ(0deg) rotateY(0deg) rotateX(90deg);
  }
  66.67% {
    transform: rotateZ(0deg) rotateY(90deg) rotateX(90deg);
  }
  83.33% {
    transform: rotateZ(0deg) rotateY(90deg) rotateX(90deg);
  }
  100% {
    transform: rotateZ(90deg) rotateY(90deg) rotateX(90deg);
  }
}

/* back left up = orange green white */
@keyframes cube-animation_back_left_up {
  0% {
    transform: rotateY(0deg);
  }
  16.67% {
    transform: rotateY(0deg);
  }
  33.33% {
    transform: rotateX(0deg) rotateY(0deg) rotateX(0deg) rotateY(90deg);
  }
  50% {
    transform: rotateX(0deg) rotateY(0deg) rotateX(-90deg) rotateY(90deg);
  }
  66.67% {
    transform: rotateX(0deg) rotateY(90deg) rotateX(-90deg) rotateY(90deg);
  }
  83.33% {
    transform: rotateX(90deg) rotateY(90deg) rotateX(-90deg) rotateY(90deg);
  }
  100% {
    transform: rotateX(90deg) rotateY(90deg) rotateX(-90deg) rotateY(90deg);
  }
}

/* back right down = orange blue yellow */
@keyframes cube-animation_back_right_down {
  0% {
    transform: rotateX(0deg);
  }
  16.67% {
    transform: rotateX(90deg);
  }
  33.33% {
    transform: rotateX(90deg);
  }
  50% {
    transform: rotateX(0deg) rotateY(0deg) rotateX(90deg);
  }
  66.67% {
    transform: rotateX(0deg) rotateY(90deg) rotateX(90deg);
  }
  83.33% {
    transform: rotateX(90deg) rotateY(90deg) rotateX(90deg);
  }
  100% {
    transform: rotateX(90deg) rotateY(90deg) rotateX(90deg);
  }
}

/* back left down = orange green yellow */
@keyframes cube-animation_back_left_down {
  0% {
  }
  16.67% {
  }
  33.33% {
    transform: rotateX(0deg);
  }
  50% {
    transform: rotateX(-90deg);
  }
  83.33% {
    transform: rotateZ(0deg) rotateX(-90deg);
  }
  100% {
    transform: rotateZ(90deg) rotateX(-90deg);
  }
}

/* front up = red white */
@keyframes cube-animation_front_up {
  0% {
    transform: rotateZ(0deg) rotateY(0deg);
  }
  16.67% {
    transform: rotateZ(0deg) rotateY(0deg);
  }
  33.33% {
    transform: rotateZ(0deg) rotateY(90deg);
  }
  66.67% {
    transform: rotateZ(0deg) rotateX(0deg) rotateY(90deg);
  }
  83.33% {
    transform: rotateZ(0deg) rotateX(90deg) rotateY(90deg);
  }
  100% {
    transform: rotateZ(90deg) rotateX(90deg) rotateY(90deg);
  }
}

/* front left = red green */
@keyframes cube-animation_front_left {
  0% {
  }
  16.67% {
  }
  33.33% {
    transform: rotateX(0deg);
  }
  50% {
    transform: rotateY(0deg) rotateX(-90deg);
  }
  66.67% {
    transform: rotateY(90deg) rotateX(-90deg);
  }
  100% {
    transform: rotateY(90deg) rotateX(-90deg);
  }
}

/* front right = red blue */
@keyframes cube-animation_front_right {
  0% {
    transform: rotateZ(0deg) rotateX(0deg);
  }
  16.67% {
    transform: rotateZ(0deg) rotateY(0deg) rotateX(90deg);
  }
  33.33% {
    transform: rotateZ(0deg) rotateY(90deg) rotateX(90deg);
  }
  83.33% {
    transform: rotateZ(0deg) rotateY(90deg) rotateX(90deg);
  }
  100% {
    transform: rotateZ(90deg) rotateY(90deg) rotateX(90deg);
  }
}

/* front down = red yellow */
@keyframes cube-animation_front_down {
  0% {
  }
  50% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  66.67% {
    transform: rotateX(0deg) rotateY(90deg);
  }
  83.33% {
    transform: rotateX(90deg) rotateY(90deg);
  }
  100% {
    transform: rotateX(90deg) rotateY(90deg);
  }
}

/* back up = orange white */
@keyframes cube-animation_back_up {
  0% {
    transform: rotateY(0deg);
  }
  16.67% {
    transform: rotateY(0deg);
  }
  33.33% {
    transform: rotateX(0deg) rotateY(90deg);
  }
  50% {
    transform: rotateX(-90deg) rotateY(90deg);
  }
  100% {
    transform: rotateX(-90deg) rotateY(90deg);
  }
}

/* back left = orange green */
@keyframes cube-animation_back_left {
  0% {
  }
  16.67% {
  }
  33.33% {
    transform: rotateX(0deg);
  }
  50% {
    transform: rotateX(-90deg);
  }
  100% {
    transform: rotateX(-90deg);
  }
}

/* back right = orange blue */
@keyframes cube-animation_back_right {
  0% {
    transform: rotateX(0deg);
  }
  16.67% {
    transform: rotateX(90deg);
  }
  33.33% {
    transform: rotateZ(0deg) rotateX(90deg);
  }
  50% {
    transform: rotateZ(0deg) rotateY(0deg) rotateX(90deg);
  }
  66.67% {
    transform: rotateZ(0deg) rotateY(90deg) rotateX(90deg);
  }
  83.33% {
    transform: rotateZ(0deg) rotateY(90deg) rotateX(90deg);
  }
  100% {
    transform: rotateZ(90deg) rotateY(90deg) rotateX(90deg);
  }
}

/* back down = orange yellow */
@keyframes cube-animation_back_down {
  0% {
  }
  50% {
    transform: rotateY(0deg);
  }
  66.67% {
    transform: rotateY(90deg);
  }
  100% {
    transform: rotateY(90deg);
  }
}

/* left up = green white */
@keyframes cube-animation_left_up {
  0% {
    transform: rotateY(0deg);
  }
  16.67% {
    transform: rotateY(0deg);
  }
  33.33% {
    transform: rotateY(90deg);
  }
  100% {
    transform: rotateY(90deg);
  }
}

/* right up = blue white */
@keyframes cube-animation_right_up {
  0% {
    transform: rotateX(0deg);
  }
  16.67% {
    transform: rotateX(90deg);
  }
  33.33% {
    transform: rotateX(90deg);
  }
  66.67% {
    transform: rotateX(90deg);
  }
  83.33% {
    transform: rotateX(180deg);
  }
  100% {
    transform: rotateX(180deg);
  }
}

/* left down = green yellow */
@keyframes cube-animation_left_down {
  0% {
  }
  16.67% {
  }
  33.33% {
    transform: rotateX(0deg);
  }
  50% {
    transform: rotateX(-90deg);
  }
  83.33% {
    transform: rotateZ(0deg) rotateX(-90deg);
  }
  100% {
    transform: rotateZ(90deg) rotateX(-90deg);
  }
}

/* right down = blue yellow */
@keyframes cube-animation_right_down {
  0% {
    transform: rotateX(0deg);
  }
  16.67% {
    transform: rotateX(90deg);
  }
  33.33% {
    transform: rotateX(90deg);
  }
  66.67% {
    transform: rotateX(90deg);
  }
  83.33% {
    transform: rotateX(180deg);
  }
  100% {
    transform: rotateX(180deg);
  }
}

/* front = red */
@keyframes cube-animation_front {
  0% {
  }
  100% {
  }
}

/* back = orange */
@keyframes cube-animation_back {
  0% {
  }
  83.33% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(90deg);
  }
}

/* left = green */
@keyframes cube-animation_left {
  0% {
  }
  16.67% {
  }
  33.33% {
    transform: rotateX(0deg);
  }
  50% {
    transform: rotateX(-90deg);
  }
  100% {
    transform: rotateX(-90deg);
  }
}

/* right = blue */
@keyframes cube-animation_right {
  0% {
    transform: rotateX(0deg);
  }
  16.67% {
    transform: rotateX(90deg);
  }
  33.33% {
    transform: rotateX(90deg);
  }
  66.67% {
    transform: rotateX(90deg);
  }
  83.33% {
    transform: rotateX(180deg);
  }
  100% {
    transform: rotateX(180deg);
  }
}

/* up = white */
@keyframes cube-animation_up {
  0% {
    transform: rotateY(0deg);
  }
  16.67% {
    transform: rotateY(0deg);
  }
  33.33% {
    transform: rotateY(90deg);
  }
  100% {
    transform: rotateY(90deg);
  }
}

/* down = yellow */
@keyframes cube-animation_down {
  0% {
  }
  50% {
    transform: rotateY(0deg);
  }
  66.67% {
    transform: rotateY(90deg);
  }
  83.33% {
    transform: rotateY(90deg);
  }
  100% {
    transform: rotateY(90deg);
  }
}