/* basic style */
 html,
 body {
	 position: relative;
	 overflow: hidden;
 }
 body {
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 height: 100vh;
	 margin: 0;
	 background: radial-gradient(circle at center, #222, #000);
	 transform-style: preserve-3d;
	 -webkit-transform-style: preserve-3d;
 }
 
 .flex {
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 width: 80px;
	 height: 80px;
	 margin: 0 -80px 0 0;
 }
 
 /* cube */
 .cube {
	 position: relative;
	 width: 1px;
	 height: 1px;
	 margin: 0 80px 0 0;
	 transform-style: preserve-3d;
 }
 .wall {
	 width: 80px;
	 height: 80px;
	 position: absolute;
	 left: calc(-80px / 2);
	 top: calc(-80px / 2);
	 text-align: center;
	 line-height: 100px;
	 border: solid 1px #fff;
 }
 .front {
	 transform: translateZ(calc(80px / 2));
 }
 .back {
	 transform: translateZ(calc(-80px / 2)) rotateY(180deg);
 }
 .right {
	 transform: translateX(calc(80px / 2)) rotateY(90deg);
 }
 .left {
	 transform: translateX(calc(-80px / 2)) rotateY(-90deg);
 }
 .top {
	 transform: translateY(calc(-80px / 2)) rotateX(90deg);
 }
 .bottom {
	 transform: translateY(calc(80px / 2)) rotateX(-90deg);
 }
 
 /* animation */
 
 //first
 .flex:nth-of-type(4) .cube:nth-of-type(1) {
	 animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s forwards;
 }
 
 //sec
 .flex:nth-of-type(3) .cube:nth-of-type(1) {
	 animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.6s forwards;
 }
 .flex:nth-of-type(4) .cube:nth-of-type(2) {
	 animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.6s forwards;
 }
 
 //third
 .flex:nth-of-type(2) .cube:nth-of-type(1) {
	 animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.7s forwards;
 }
 .flex:nth-of-type(3) .cube:nth-of-type(2) {
	 animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.7s forwards;
 }
 .flex:nth-of-type(4) .cube:nth-of-type(3) {
	 animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s forwards;
 }
 
 //forth
 .flex:nth-of-type(1) .cube:nth-of-type(1) {
	 animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s forwards;
 }
 .flex:nth-of-type(2) .cube:nth-of-type(2) {
	 animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s forwards;
 }
 .flex:nth-of-type(3) .cube:nth-of-type(3) {
	 animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s forwards;
 }
 .flex:nth-of-type(4) .cube:nth-of-type(4) {
	 animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s forwards;
 }
 
 //five
 .flex:nth-of-type(1) .cube:nth-of-type(2) {
	 animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.9s forwards;
 }
 .flex:nth-of-type(2) .cube:nth-of-type(3) {
	 animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.9s forwards;
 }
 .flex:nth-of-type(3) .cube:nth-of-type(4) {
	 animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.9s forwards;
 }
 
 //six
 .flex:nth-of-type(1) .cube:nth-of-type(3) {
	 animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 1s forwards;
 }
 .flex:nth-of-type(2) .cube:nth-of-type(4) {
	 animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 1s forwards;
 }
 
 //seven
 .flex:nth-of-type(1) .cube:nth-of-type(4) {
	 animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 1.1s forwards;
 }
 
 @keyframes rotation {
	 100% {
		 transform: rotateX(270deg) rotateY(270deg);
	 }
 }
 
 .wall{
	 animation: color 2s linear 1.5s forwards;
 }
 
 @keyframes color {
	 100% {
		 background-color: #fff;
	 }
 }
 #parentxx {
 animation: animated-text 2s steps(30,end) 1s 1 normal both
 }
 
 #parentxx {
 height: 40px;
 white-space: nowrap;
 overflow: hidden; 
 font-family: 'Tahoma', monospace;  
 font-size: 24px;
 color: slateblue;
 position: relative;
 }