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

@keyframes demo-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 demo-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 demo-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 demo-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 demo-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 demo-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 demo-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 demo-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 demo-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 demo-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 demo-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 demo-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 demo-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 demo-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 demo-animation_back_left {
	0% { }
	16.67% { }
	33.33% { transform: rotateX(0deg); }
	50% { transform: rotateX(-90deg); }
	100% { transform: rotateX(-90deg); }
}

/* back right = orange blue */
@keyframes demo-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 demo-animation_back_down {
	0% { } 
	50% { transform: rotateY(0deg);}
	66.67% { transform: rotateY(90deg);}
	100% { transform: rotateY(90deg);}
}

/* left up = green white */
@keyframes demo-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 demo-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 demo-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 demo-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 demo-animation_front { 
	0% { } 
	100% { } 
}

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

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

/* right = blue */
@keyframes demo-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 demo-animation_up { 
	0% { transform: rotateY(0deg); }
	16.67% { transform: rotateY(0deg) }
	33.33% { transform: rotateY(90deg); }
	100% { transform: rotateY(90deg); }
}

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