* { padding: 0; margin: 0 auto; box-sizing: border-box; } body { background-image: radial-gradient(circle, #111, #000 800px); min-height: 100vh; display: grid; place-items: center; perspective: 1200px; } body *:not(:empty) { transform-style: preserve-3d; } .scene { position: absolute; font-size: 24px; -webkit-animation: sceneRotate 45s infinite linear; animation: sceneRotate 45s infinite linear; } @-webkit-keyframes sceneRotate { to { transform: rotateX(360deg) rotateY(1080deg); } } @keyframes sceneRotate { to { transform: rotateX(360deg) rotateY(1080deg); } } .cubes { -webkit-animation: cubesScale 10s infinite linear; animation: cubesScale 10s infinite linear; } @-webkit-keyframes cubesScale { from { transform: scale3d(1, 1, 1); } to { transform: scale3d(1.66666, 1.66666, 1.66666); } } @keyframes cubesScale { from { transform: scale3d(1, 1, 1); } to { transform: scale3d(1.66666, 1.66666, 1.66666); } } .cube, .mainCube { position: absolute; inset: calc(var(--hSize) * -1); } .cube { --hSize: 0.5em; --bgSize: 5em; } .cube:nth-child(1) { --x: -2; --y: -2; --z: -2; } .cube:nth-child(2) { --x: -2; --y: -2; --z: -1; } .cube:nth-child(3) { --x: -2; --y: -2; --z: 0; } .cube:nth-child(4) { --x: -2; --y: -2; --z: 1; } .cube:nth-child(5) { --x: -2; --y: -2; --z: 2; } .cube:nth-child(6) { --x: -2; --y: -1; --z: -2; } .cube:nth-child(7) { --x: -2; --y: -1; --z: -1; } .cube:nth-child(8) { --x: -2; --y: -1; --z: 0; } .cube:nth-child(9) { --x: -2; --y: -1; --z: 1; } .cube:nth-child(10) { --x: -2; --y: -1; --z: 2; } .cube:nth-child(11) { --x: -2; --y: 0; --z: -2; } .cube:nth-child(12) { --x: -2; --y: 0; --z: -1; } .cube:nth-child(13) { --x: -2; --y: 0; --z: 0; } .cube:nth-child(14) { --x: -2; --y: 0; --z: 1; } .cube:nth-child(15) { --x: -2; --y: 0; --z: 2; } .cube:nth-child(16) { --x: -2; --y: 1; --z: -2; } .cube:nth-child(17) { --x: -2; --y: 1; --z: -1; } .cube:nth-child(18) { --x: -2; --y: 1; --z: 0; } .cube:nth-child(19) { --x: -2; --y: 1; --z: 1; } .cube:nth-child(20) { --x: -2; --y: 1; --z: 2; } .cube:nth-child(21) { --x: -2; --y: 2; --z: -2; } .cube:nth-child(22) { --x: -2; --y: 2; --z: -1; } .cube:nth-child(23) { --x: -2; --y: 2; --z: 0; } .cube:nth-child(24) { --x: -2; --y: 2; --z: 1; } .cube:nth-child(25) { --x: -2; --y: 2; --z: 2; } .cube:nth-child(26) { --x: -1; --y: -2; --z: -2; } .cube:nth-child(27) { --x: -1; --y: -2; --z: -1; } .cube:nth-child(28) { --x: -1; --y: -2; --z: 0; } .cube:nth-child(29) { --x: -1; --y: -2; --z: 1; } .cube:nth-child(30) { --x: -1; --y: -2; --z: 2; } .cube:nth-child(31) { --x: -1; --y: -1; --z: -2; } .cube:nth-child(32) { --x: -1; --y: -1; --z: 2; } .cube:nth-child(33) { --x: -1; --y: 0; --z: -2; } .cube:nth-child(34) { --x: -1; --y: 0; --z: 2; } .cube:nth-child(35) { --x: -1; --y: 1; --z: -2; } .cube:nth-child(36) { --x: -1; --y: 1; --z: 2; } .cube:nth-child(37) { --x: -1; --y: 2; --z: -2; } .cube:nth-child(38) { --x: -1; --y: 2; --z: -1; } .cube:nth-child(39) { --x: -1; --y: 2; --z: 0; } .cube:nth-child(40) { --x: -1; --y: 2; --z: 1; } .cube:nth-child(41) { --x: -1; --y: 2; --z: 2; } .cube:nth-child(42) { --x: 0; --y: -2; --z: -2; } .cube:nth-child(43) { --x: 0; --y: -2; --z: -1; } .cube:nth-child(44) { --x: 0; --y: -2; --z: 0; } .cube:nth-child(45) { --x: 0; --y: -2; --z: 1; } .cube:nth-child(46) { --x: 0; --y: -2; --z: 2; } .cube:nth-child(47) { --x: 0; --y: -1; --z: -2; } .cube:nth-child(48) { --x: 0; --y: -1; --z: 2; } .cube:nth-child(49) { --x: 0; --y: 0; --z: -2; } .cube:nth-child(50) { --x: 0; --y: 0; --z: 2; } .cube:nth-child(51) { --x: 0; --y: 1; --z: -2; } .cube:nth-child(52) { --x: 0; --y: 1; --z: 2; } .cube:nth-child(53) { --x: 0; --y: 2; --z: -2; } .cube:nth-child(54) { --x: 0; --y: 2; --z: -1; } .cube:nth-child(55) { --x: 0; --y: 2; --z: 0; } .cube:nth-child(56) { --x: 0; --y: 2; --z: 1; } .cube:nth-child(57) { --x: 0; --y: 2; --z: 2; } .cube:nth-child(58) { --x: 1; --y: -2; --z: -2; } .cube:nth-child(59) { --x: 1; --y: -2; --z: -1; } .cube:nth-child(60) { --x: 1; --y: -2; --z: 0; } .cube:nth-child(61) { --x: 1; --y: -2; --z: 1; } .cube:nth-child(62) { --x: 1; --y: -2; --z: 2; } .cube:nth-child(63) { --x: 1; --y: -1; --z: -2; } .cube:nth-child(64) { --x: 1; --y: -1; --z: 2; } .cube:nth-child(65) { --x: 1; --y: 0; --z: -2; } .cube:nth-child(66) { --x: 1; --y: 0; --z: 2; } .cube:nth-child(67) { --x: 1; --y: 1; --z: -2; } .cube:nth-child(68) { --x: 1; --y: 1; --z: 2; } .cube:nth-child(69) { --x: 1; --y: 2; --z: -2; } .cube:nth-child(70) { --x: 1; --y: 2; --z: -1; } .cube:nth-child(71) { --x: 1; --y: 2; --z: 0; } .cube:nth-child(72) { --x: 1; --y: 2; --z: 1; } .cube:nth-child(73) { --x: 1; --y: 2; --z: 2; } .cube:nth-child(74) { --x: 2; --y: -2; --z: -2; } .cube:nth-child(75) { --x: 2; --y: -2; --z: -1; } .cube:nth-child(76) { --x: 2; --y: -2; --z: 0; } .cube:nth-child(77) { --x: 2; --y: -2; --z: 1; } .cube:nth-child(78) { --x: 2; --y: -2; --z: 2; } .cube:nth-child(79) { --x: 2; --y: -1; --z: -2; } .cube:nth-child(80) { --x: 2; --y: -1; --z: -1; } .cube:nth-child(81) { --x: 2; --y: -1; --z: 0; } .cube:nth-child(82) { --x: 2; --y: -1; --z: 1; } .cube:nth-child(83) { --x: 2; --y: -1; --z: 2; } .cube:nth-child(84) { --x: 2; --y: 0; --z: -2; } .cube:nth-child(85) { --x: 2; --y: 0; --z: -1; } .cube:nth-child(86) { --x: 2; --y: 0; --z: 0; } .cube:nth-child(87) { --x: 2; --y: 0; --z: 1; } .cube:nth-child(88) { --x: 2; --y: 0; --z: 2; } .cube:nth-child(89) { --x: 2; --y: 1; --z: -2; } .cube:nth-child(90) { --x: 2; --y: 1; --z: -1; } .cube:nth-child(91) { --x: 2; --y: 1; --z: 0; } .cube:nth-child(92) { --x: 2; --y: 1; --z: 1; } .cube:nth-child(93) { --x: 2; --y: 1; --z: 2; } .cube:nth-child(94) { --x: 2; --y: 2; --z: -2; } .cube:nth-child(95) { --x: 2; --y: 2; --z: -1; } .cube:nth-child(96) { --x: 2; --y: 2; --z: 0; } .cube:nth-child(97) { --x: 2; --y: 2; --z: 1; } .cube:nth-child(98) { --x: 2; --y: 2; --z: 2; } .cube:nth-child(1) { -webkit-animation: cubeTransform0 10s infinite ease-in; animation: cubeTransform0 10s infinite ease-in; } @-webkit-keyframes cubeTransform0 { 0%, 14.89% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 29.89% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 44.89%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform0 { 0%, 14.89% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 29.89% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 44.89%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(2) { -webkit-animation: cubeTransform1 10s infinite ease-in; animation: cubeTransform1 10s infinite ease-in; } @-webkit-keyframes cubeTransform1 { 0%, 57.84% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 72.84% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 87.84%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform1 { 0%, 57.84% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 72.84% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 87.84%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(3) { -webkit-animation: cubeTransform2 10s infinite ease-in; animation: cubeTransform2 10s infinite ease-in; } @-webkit-keyframes cubeTransform2 { 0%, 52.04% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 67.04% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 82.04%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform2 { 0%, 52.04% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 67.04% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 82.04%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(4) { -webkit-animation: cubeTransform3 10s infinite ease-in; animation: cubeTransform3 10s infinite ease-in; } @-webkit-keyframes cubeTransform3 { 0%, 2.39% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 17.39% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 32.39%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform3 { 0%, 2.39% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 17.39% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 32.39%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(5) { -webkit-animation: cubeTransform4 10s infinite ease-in; animation: cubeTransform4 10s infinite ease-in; } @-webkit-keyframes cubeTransform4 { 0%, 42.82% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 57.82% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 72.82%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform4 { 0%, 42.82% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 57.82% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 72.82%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(6) { -webkit-animation: cubeTransform5 10s infinite ease-in; animation: cubeTransform5 10s infinite ease-in; } @-webkit-keyframes cubeTransform5 { 0%, 12.9% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 27.9% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 42.9%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform5 { 0%, 12.9% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 27.9% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 42.9%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(7) { -webkit-animation: cubeTransform6 10s infinite ease-in; animation: cubeTransform6 10s infinite ease-in; } @-webkit-keyframes cubeTransform6 { 0%, 66.25% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 81.25% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 96.25%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform6 { 0%, 66.25% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 81.25% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 96.25%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(8) { -webkit-animation: cubeTransform7 10s infinite ease-in; animation: cubeTransform7 10s infinite ease-in; } @-webkit-keyframes cubeTransform7 { 0%, 35.03% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 50.03% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 65.03%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform7 { 0%, 35.03% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 50.03% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 65.03%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(9) { -webkit-animation: cubeTransform8 10s infinite ease-in; animation: cubeTransform8 10s infinite ease-in; } @-webkit-keyframes cubeTransform8 { 0%, 10.76% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 25.76% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40.76%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform8 { 0%, 10.76% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 25.76% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40.76%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(10) { -webkit-animation: cubeTransform9 10s infinite ease-in; animation: cubeTransform9 10s infinite ease-in; } @-webkit-keyframes cubeTransform9 { 0%, 25.59% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 40.59% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 55.59%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform9 { 0%, 25.59% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 40.59% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 55.59%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(11) { -webkit-animation: cubeTransform10 10s infinite ease-in; animation: cubeTransform10 10s infinite ease-in; } @-webkit-keyframes cubeTransform10 { 0%, 56.18% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 71.18% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 86.18%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform10 { 0%, 56.18% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 71.18% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 86.18%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(12) { -webkit-animation: cubeTransform11 10s infinite ease-in; animation: cubeTransform11 10s infinite ease-in; } @-webkit-keyframes cubeTransform11 { 0%, 10.08% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 25.08% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40.08%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform11 { 0%, 10.08% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 25.08% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40.08%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(13) { -webkit-animation: cubeTransform12 10s infinite ease-in; animation: cubeTransform12 10s infinite ease-in; } @-webkit-keyframes cubeTransform12 { 0%, 59.05% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 74.05% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 89.05%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform12 { 0%, 59.05% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 74.05% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 89.05%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(14) { -webkit-animation: cubeTransform13 10s infinite ease-in; animation: cubeTransform13 10s infinite ease-in; } @-webkit-keyframes cubeTransform13 { 0%, 54.19% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 69.19% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 84.19%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform13 { 0%, 54.19% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 69.19% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 84.19%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(15) { -webkit-animation: cubeTransform14 10s infinite ease-in; animation: cubeTransform14 10s infinite ease-in; } @-webkit-keyframes cubeTransform14 { 0%, 29.74% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 44.74% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 59.74%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform14 { 0%, 29.74% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 44.74% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 59.74%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(16) { -webkit-animation: cubeTransform15 10s infinite ease-in; animation: cubeTransform15 10s infinite ease-in; } @-webkit-keyframes cubeTransform15 { 0%, 16.77% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 31.77% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 46.77%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform15 { 0%, 16.77% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 31.77% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 46.77%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(17) { -webkit-animation: cubeTransform16 10s infinite ease-in; animation: cubeTransform16 10s infinite ease-in; } @-webkit-keyframes cubeTransform16 { 0%, 48.41% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 63.41% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 78.41%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform16 { 0%, 48.41% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 63.41% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 78.41%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(18) { -webkit-animation: cubeTransform17 10s infinite ease-in; animation: cubeTransform17 10s infinite ease-in; } @-webkit-keyframes cubeTransform17 { 0%, 37.34% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 52.34% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 67.34%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform17 { 0%, 37.34% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 52.34% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 67.34%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(19) { -webkit-animation: cubeTransform18 10s infinite ease-in; animation: cubeTransform18 10s infinite ease-in; } @-webkit-keyframes cubeTransform18 { 0%, 5.53% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 20.53% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 35.53%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform18 { 0%, 5.53% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 20.53% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 35.53%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(20) { -webkit-animation: cubeTransform19 10s infinite ease-in; animation: cubeTransform19 10s infinite ease-in; } @-webkit-keyframes cubeTransform19 { 0%, 35.87% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 50.87% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 65.87%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform19 { 0%, 35.87% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 50.87% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 65.87%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(21) { -webkit-animation: cubeTransform20 10s infinite ease-in; animation: cubeTransform20 10s infinite ease-in; } @-webkit-keyframes cubeTransform20 { 0%, 51.04% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 66.04% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 81.04%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform20 { 0%, 51.04% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 66.04% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 81.04%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(22) { -webkit-animation: cubeTransform21 10s infinite ease-in; animation: cubeTransform21 10s infinite ease-in; } @-webkit-keyframes cubeTransform21 { 0%, 48.91% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 63.91% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 78.91%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform21 { 0%, 48.91% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 63.91% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 78.91%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(23) { -webkit-animation: cubeTransform22 10s infinite ease-in; animation: cubeTransform22 10s infinite ease-in; } @-webkit-keyframes cubeTransform22 { 0%, 64.75% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 79.75% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 94.75%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform22 { 0%, 64.75% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 79.75% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 94.75%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(24) { -webkit-animation: cubeTransform23 10s infinite ease-in; animation: cubeTransform23 10s infinite ease-in; } @-webkit-keyframes cubeTransform23 { 0%, 30.72% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 45.72% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 60.72%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform23 { 0%, 30.72% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 45.72% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 60.72%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(25) { -webkit-animation: cubeTransform24 10s infinite ease-in; animation: cubeTransform24 10s infinite ease-in; } @-webkit-keyframes cubeTransform24 { 0%, 49.27% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 64.27% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 79.27%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform24 { 0%, 49.27% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 64.27% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 79.27%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(26) { -webkit-animation: cubeTransform25 10s infinite ease-in; animation: cubeTransform25 10s infinite ease-in; } @-webkit-keyframes cubeTransform25 { 0%, 1.05% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 16.05% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 31.05%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform25 { 0%, 1.05% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 16.05% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 31.05%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(27) { -webkit-animation: cubeTransform26 10s infinite ease-in; animation: cubeTransform26 10s infinite ease-in; } @-webkit-keyframes cubeTransform26 { 0%, 68.5% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 83.5% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 98.5%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform26 { 0%, 68.5% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 83.5% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 98.5%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(28) { -webkit-animation: cubeTransform27 10s infinite ease-in; animation: cubeTransform27 10s infinite ease-in; } @-webkit-keyframes cubeTransform27 { 0%, 22.23% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 37.23% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 52.23%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform27 { 0%, 22.23% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 37.23% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 52.23%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(29) { -webkit-animation: cubeTransform28 10s infinite ease-in; animation: cubeTransform28 10s infinite ease-in; } @-webkit-keyframes cubeTransform28 { 0%, 32.52% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 47.52% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 62.52%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform28 { 0%, 32.52% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 47.52% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 62.52%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(30) { -webkit-animation: cubeTransform29 10s infinite ease-in; animation: cubeTransform29 10s infinite ease-in; } @-webkit-keyframes cubeTransform29 { 0%, 13.61% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 28.61% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 43.61%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform29 { 0%, 13.61% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 28.61% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 43.61%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(31) { -webkit-animation: cubeTransform30 10s infinite ease-in; animation: cubeTransform30 10s infinite ease-in; } @-webkit-keyframes cubeTransform30 { 0%, 44.3% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 59.3% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 74.3%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform30 { 0%, 44.3% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 59.3% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 74.3%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(32) { -webkit-animation: cubeTransform31 10s infinite ease-in; animation: cubeTransform31 10s infinite ease-in; } @-webkit-keyframes cubeTransform31 { 0%, 68.01% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 83.01% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 98.01%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform31 { 0%, 68.01% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 83.01% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 98.01%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(33) { -webkit-animation: cubeTransform32 10s infinite ease-in; animation: cubeTransform32 10s infinite ease-in; } @-webkit-keyframes cubeTransform32 { 0%, 27.45% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 42.45% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 57.45%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform32 { 0%, 27.45% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 42.45% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 57.45%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(34) { -webkit-animation: cubeTransform33 10s infinite ease-in; animation: cubeTransform33 10s infinite ease-in; } @-webkit-keyframes cubeTransform33 { 0%, 35.09% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 50.09% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 65.09%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform33 { 0%, 35.09% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 50.09% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 65.09%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(35) { -webkit-animation: cubeTransform34 10s infinite ease-in; animation: cubeTransform34 10s infinite ease-in; } @-webkit-keyframes cubeTransform34 { 0%, 57.41% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 72.41% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 87.41%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform34 { 0%, 57.41% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 72.41% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 87.41%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(36) { -webkit-animation: cubeTransform35 10s infinite ease-in; animation: cubeTransform35 10s infinite ease-in; } @-webkit-keyframes cubeTransform35 { 0%, 28.19% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 43.19% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 58.19%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform35 { 0%, 28.19% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 43.19% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 58.19%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(37) { -webkit-animation: cubeTransform36 10s infinite ease-in; animation: cubeTransform36 10s infinite ease-in; } @-webkit-keyframes cubeTransform36 { 0%, 7.75% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 22.75% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 37.75%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform36 { 0%, 7.75% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 22.75% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 37.75%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(38) { -webkit-animation: cubeTransform37 10s infinite ease-in; animation: cubeTransform37 10s infinite ease-in; } @-webkit-keyframes cubeTransform37 { 0%, 48.73% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 63.73% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 78.73%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform37 { 0%, 48.73% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 63.73% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 78.73%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(39) { -webkit-animation: cubeTransform38 10s infinite ease-in; animation: cubeTransform38 10s infinite ease-in; } @-webkit-keyframes cubeTransform38 { 0%, 27.85% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 42.85% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 57.85%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform38 { 0%, 27.85% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 42.85% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 57.85%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(40) { -webkit-animation: cubeTransform39 10s infinite ease-in; animation: cubeTransform39 10s infinite ease-in; } @-webkit-keyframes cubeTransform39 { 0%, 10.07% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 25.07% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40.07%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform39 { 0%, 10.07% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 25.07% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40.07%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(41) { -webkit-animation: cubeTransform40 10s infinite ease-in; animation: cubeTransform40 10s infinite ease-in; } @-webkit-keyframes cubeTransform40 { 0%, 30.44% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 45.44% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 60.44%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform40 { 0%, 30.44% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 45.44% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 60.44%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(42) { -webkit-animation: cubeTransform41 10s infinite ease-in; animation: cubeTransform41 10s infinite ease-in; } @-webkit-keyframes cubeTransform41 { 0%, 34.26% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 49.26% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 64.26%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform41 { 0%, 34.26% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 49.26% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 64.26%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(43) { -webkit-animation: cubeTransform42 10s infinite ease-in; animation: cubeTransform42 10s infinite ease-in; } @-webkit-keyframes cubeTransform42 { 0%, 16.58% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 31.58% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 46.58%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform42 { 0%, 16.58% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 31.58% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 46.58%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(44) { -webkit-animation: cubeTransform43 10s infinite ease-in; animation: cubeTransform43 10s infinite ease-in; } @-webkit-keyframes cubeTransform43 { 0%, 61.63% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 76.63% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 91.63%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform43 { 0%, 61.63% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 76.63% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 91.63%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(45) { -webkit-animation: cubeTransform44 10s infinite ease-in; animation: cubeTransform44 10s infinite ease-in; } @-webkit-keyframes cubeTransform44 { 0%, 16.19% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 31.19% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 46.19%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform44 { 0%, 16.19% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 31.19% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 46.19%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(46) { -webkit-animation: cubeTransform45 10s infinite ease-in; animation: cubeTransform45 10s infinite ease-in; } @-webkit-keyframes cubeTransform45 { 0%, 56.82% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 71.82% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 86.82%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform45 { 0%, 56.82% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 71.82% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 86.82%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(47) { -webkit-animation: cubeTransform46 10s infinite ease-in; animation: cubeTransform46 10s infinite ease-in; } @-webkit-keyframes cubeTransform46 { 0%, 50.74% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 65.74% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 80.74%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform46 { 0%, 50.74% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 65.74% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 80.74%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(48) { -webkit-animation: cubeTransform47 10s infinite ease-in; animation: cubeTransform47 10s infinite ease-in; } @-webkit-keyframes cubeTransform47 { 0%, 62.73% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 77.73% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 92.73%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform47 { 0%, 62.73% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 77.73% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 92.73%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(49) { -webkit-animation: cubeTransform48 10s infinite ease-in; animation: cubeTransform48 10s infinite ease-in; } @-webkit-keyframes cubeTransform48 { 0%, 52.7% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 67.7% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 82.7%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform48 { 0%, 52.7% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 67.7% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 82.7%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(50) { -webkit-animation: cubeTransform49 10s infinite ease-in; animation: cubeTransform49 10s infinite ease-in; } @-webkit-keyframes cubeTransform49 { 0%, 0.75% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 15.75% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 30.75%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform49 { 0%, 0.75% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 15.75% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 30.75%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(51) { -webkit-animation: cubeTransform50 10s infinite ease-in; animation: cubeTransform50 10s infinite ease-in; } @-webkit-keyframes cubeTransform50 { 0%, 19.84% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 34.84% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 49.84%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform50 { 0%, 19.84% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 34.84% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 49.84%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(52) { -webkit-animation: cubeTransform51 10s infinite ease-in; animation: cubeTransform51 10s infinite ease-in; } @-webkit-keyframes cubeTransform51 { 0%, 27.87% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 42.87% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 57.87%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform51 { 0%, 27.87% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 42.87% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 57.87%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(53) { -webkit-animation: cubeTransform52 10s infinite ease-in; animation: cubeTransform52 10s infinite ease-in; } @-webkit-keyframes cubeTransform52 { 0%, 10.89% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 25.89% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40.89%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform52 { 0%, 10.89% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 25.89% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40.89%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(54) { -webkit-animation: cubeTransform53 10s infinite ease-in; animation: cubeTransform53 10s infinite ease-in; } @-webkit-keyframes cubeTransform53 { 0%, 33.5% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 48.5% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 63.5%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform53 { 0%, 33.5% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 48.5% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 63.5%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(55) { -webkit-animation: cubeTransform54 10s infinite ease-in; animation: cubeTransform54 10s infinite ease-in; } @-webkit-keyframes cubeTransform54 { 0%, 50.56% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 65.56% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 80.56%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform54 { 0%, 50.56% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 65.56% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 80.56%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(56) { -webkit-animation: cubeTransform55 10s infinite ease-in; animation: cubeTransform55 10s infinite ease-in; } @-webkit-keyframes cubeTransform55 { 0%, 45.27% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 60.27% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 75.27%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform55 { 0%, 45.27% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 60.27% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 75.27%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(57) { -webkit-animation: cubeTransform56 10s infinite ease-in; animation: cubeTransform56 10s infinite ease-in; } @-webkit-keyframes cubeTransform56 { 0%, 66.95% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 81.95% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 96.95%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform56 { 0%, 66.95% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 81.95% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 96.95%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(58) { -webkit-animation: cubeTransform57 10s infinite ease-in; animation: cubeTransform57 10s infinite ease-in; } @-webkit-keyframes cubeTransform57 { 0%, 13.17% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 28.17% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 43.17%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform57 { 0%, 13.17% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 28.17% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 43.17%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(59) { -webkit-animation: cubeTransform58 10s infinite ease-in; animation: cubeTransform58 10s infinite ease-in; } @-webkit-keyframes cubeTransform58 { 0%, 39.92% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 54.92% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 69.92%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform58 { 0%, 39.92% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 54.92% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 69.92%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(60) { -webkit-animation: cubeTransform59 10s infinite ease-in; animation: cubeTransform59 10s infinite ease-in; } @-webkit-keyframes cubeTransform59 { 0%, 38.87% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 53.87% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 68.87%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform59 { 0%, 38.87% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 53.87% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 68.87%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(61) { -webkit-animation: cubeTransform60 10s infinite ease-in; animation: cubeTransform60 10s infinite ease-in; } @-webkit-keyframes cubeTransform60 { 0%, 19.74% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 34.74% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 49.74%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform60 { 0%, 19.74% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 34.74% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 49.74%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(62) { -webkit-animation: cubeTransform61 10s infinite ease-in; animation: cubeTransform61 10s infinite ease-in; } @-webkit-keyframes cubeTransform61 { 0%, 56.56% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 71.56% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 86.56%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform61 { 0%, 56.56% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 71.56% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 86.56%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(63) { -webkit-animation: cubeTransform62 10s infinite ease-in; animation: cubeTransform62 10s infinite ease-in; } @-webkit-keyframes cubeTransform62 { 0%, 43% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 58% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 73%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform62 { 0%, 43% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 58% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 73%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(64) { -webkit-animation: cubeTransform63 10s infinite ease-in; animation: cubeTransform63 10s infinite ease-in; } @-webkit-keyframes cubeTransform63 { 0%, 55.6% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 70.6% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 85.6%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform63 { 0%, 55.6% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 70.6% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 85.6%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(65) { -webkit-animation: cubeTransform64 10s infinite ease-in; animation: cubeTransform64 10s infinite ease-in; } @-webkit-keyframes cubeTransform64 { 0%, 0.94% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 15.94% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 30.94%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform64 { 0%, 0.94% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 15.94% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 30.94%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(66) { -webkit-animation: cubeTransform65 10s infinite ease-in; animation: cubeTransform65 10s infinite ease-in; } @-webkit-keyframes cubeTransform65 { 0%, 8.4% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 23.4% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 38.4%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform65 { 0%, 8.4% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 23.4% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 38.4%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(67) { -webkit-animation: cubeTransform66 10s infinite ease-in; animation: cubeTransform66 10s infinite ease-in; } @-webkit-keyframes cubeTransform66 { 0%, 62.59% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 77.59% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 92.59%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform66 { 0%, 62.59% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 77.59% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 92.59%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(68) { -webkit-animation: cubeTransform67 10s infinite ease-in; animation: cubeTransform67 10s infinite ease-in; } @-webkit-keyframes cubeTransform67 { 0%, 40.08% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 55.08% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 70.08%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform67 { 0%, 40.08% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 55.08% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 70.08%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(69) { -webkit-animation: cubeTransform68 10s infinite ease-in; animation: cubeTransform68 10s infinite ease-in; } @-webkit-keyframes cubeTransform68 { 0%, 13.22% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 28.22% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 43.22%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform68 { 0%, 13.22% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 28.22% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 43.22%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(70) { -webkit-animation: cubeTransform69 10s infinite ease-in; animation: cubeTransform69 10s infinite ease-in; } @-webkit-keyframes cubeTransform69 { 0%, 17.39% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 32.39% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 47.39%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform69 { 0%, 17.39% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 32.39% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 47.39%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(71) { -webkit-animation: cubeTransform70 10s infinite ease-in; animation: cubeTransform70 10s infinite ease-in; } @-webkit-keyframes cubeTransform70 { 0%, 46.79% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 61.79% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 76.79%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform70 { 0%, 46.79% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 61.79% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 76.79%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(72) { -webkit-animation: cubeTransform71 10s infinite ease-in; animation: cubeTransform71 10s infinite ease-in; } @-webkit-keyframes cubeTransform71 { 0%, 48.52% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 63.52% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 78.52%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform71 { 0%, 48.52% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 63.52% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 78.52%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(73) { -webkit-animation: cubeTransform72 10s infinite ease-in; animation: cubeTransform72 10s infinite ease-in; } @-webkit-keyframes cubeTransform72 { 0%, 55.24% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 70.24% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 85.24%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform72 { 0%, 55.24% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 70.24% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 85.24%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(74) { -webkit-animation: cubeTransform73 10s infinite ease-in; animation: cubeTransform73 10s infinite ease-in; } @-webkit-keyframes cubeTransform73 { 0%, 63.1% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 78.1% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 93.1%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform73 { 0%, 63.1% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 78.1% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 93.1%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(75) { -webkit-animation: cubeTransform74 10s infinite ease-in; animation: cubeTransform74 10s infinite ease-in; } @-webkit-keyframes cubeTransform74 { 0%, 23.03% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 38.03% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 53.03%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform74 { 0%, 23.03% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 38.03% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 53.03%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(76) { -webkit-animation: cubeTransform75 10s infinite ease-in; animation: cubeTransform75 10s infinite ease-in; } @-webkit-keyframes cubeTransform75 { 0%, 14.63% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 29.63% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 44.63%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform75 { 0%, 14.63% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 29.63% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 44.63%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(77) { -webkit-animation: cubeTransform76 10s infinite ease-in; animation: cubeTransform76 10s infinite ease-in; } @-webkit-keyframes cubeTransform76 { 0%, 29.51% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 44.51% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 59.51%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform76 { 0%, 29.51% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 44.51% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 59.51%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(78) { -webkit-animation: cubeTransform77 10s infinite ease-in; animation: cubeTransform77 10s infinite ease-in; } @-webkit-keyframes cubeTransform77 { 0%, 44.11% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 59.11% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 74.11%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform77 { 0%, 44.11% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 59.11% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 74.11%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(79) { -webkit-animation: cubeTransform78 10s infinite ease-in; animation: cubeTransform78 10s infinite ease-in; } @-webkit-keyframes cubeTransform78 { 0%, 49.86% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 64.86% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 79.86%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform78 { 0%, 49.86% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 64.86% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 79.86%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(80) { -webkit-animation: cubeTransform79 10s infinite ease-in; animation: cubeTransform79 10s infinite ease-in; } @-webkit-keyframes cubeTransform79 { 0%, 43.04% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 58.04% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 73.04%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform79 { 0%, 43.04% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 58.04% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 73.04%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(81) { -webkit-animation: cubeTransform80 10s infinite ease-in; animation: cubeTransform80 10s infinite ease-in; } @-webkit-keyframes cubeTransform80 { 0%, 26.2% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 41.2% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 56.2%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform80 { 0%, 26.2% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 41.2% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 56.2%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(82) { -webkit-animation: cubeTransform81 10s infinite ease-in; animation: cubeTransform81 10s infinite ease-in; } @-webkit-keyframes cubeTransform81 { 0%, 1.88% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 16.88% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 31.88%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform81 { 0%, 1.88% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 16.88% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 31.88%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(83) { -webkit-animation: cubeTransform82 10s infinite ease-in; animation: cubeTransform82 10s infinite ease-in; } @-webkit-keyframes cubeTransform82 { 0%, 63.8% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 78.8% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 93.8%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform82 { 0%, 63.8% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 78.8% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 93.8%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(84) { -webkit-animation: cubeTransform83 10s infinite ease-in; animation: cubeTransform83 10s infinite ease-in; } @-webkit-keyframes cubeTransform83 { 0%, 55.71% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 70.71% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 85.71%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform83 { 0%, 55.71% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 70.71% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 85.71%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(85) { -webkit-animation: cubeTransform84 10s infinite ease-in; animation: cubeTransform84 10s infinite ease-in; } @-webkit-keyframes cubeTransform84 { 0%, 7.73% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 22.73% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 37.73%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform84 { 0%, 7.73% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 22.73% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 37.73%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(86) { -webkit-animation: cubeTransform85 10s infinite ease-in; animation: cubeTransform85 10s infinite ease-in; } @-webkit-keyframes cubeTransform85 { 0%, 29.91% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 44.91% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 59.91%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform85 { 0%, 29.91% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 44.91% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 59.91%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(87) { -webkit-animation: cubeTransform86 10s infinite ease-in; animation: cubeTransform86 10s infinite ease-in; } @-webkit-keyframes cubeTransform86 { 0%, 34.84% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 49.84% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 64.84%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform86 { 0%, 34.84% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 49.84% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 64.84%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(88) { -webkit-animation: cubeTransform87 10s infinite ease-in; animation: cubeTransform87 10s infinite ease-in; } @-webkit-keyframes cubeTransform87 { 0%, 28.25% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 43.25% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 58.25%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform87 { 0%, 28.25% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 43.25% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 58.25%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(89) { -webkit-animation: cubeTransform88 10s infinite ease-in; animation: cubeTransform88 10s infinite ease-in; } @-webkit-keyframes cubeTransform88 { 0%, 7.2% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 22.2% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 37.2%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform88 { 0%, 7.2% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 22.2% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 37.2%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(90) { -webkit-animation: cubeTransform89 10s infinite ease-in; animation: cubeTransform89 10s infinite ease-in; } @-webkit-keyframes cubeTransform89 { 0%, 12.8% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 27.8% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 42.8%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform89 { 0%, 12.8% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 27.8% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 42.8%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(91) { -webkit-animation: cubeTransform90 10s infinite ease-in; animation: cubeTransform90 10s infinite ease-in; } @-webkit-keyframes cubeTransform90 { 0%, 63.93% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 78.93% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 93.93%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform90 { 0%, 63.93% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 78.93% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 93.93%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(92) { -webkit-animation: cubeTransform91 10s infinite ease-in; animation: cubeTransform91 10s infinite ease-in; } @-webkit-keyframes cubeTransform91 { 0%, 19.25% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 34.25% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 49.25%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform91 { 0%, 19.25% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 34.25% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 49.25%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(93) { -webkit-animation: cubeTransform92 10s infinite ease-in; animation: cubeTransform92 10s infinite ease-in; } @-webkit-keyframes cubeTransform92 { 0%, 55.21% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 70.21% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 85.21%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform92 { 0%, 55.21% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 70.21% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 85.21%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(94) { -webkit-animation: cubeTransform93 10s infinite ease-in; animation: cubeTransform93 10s infinite ease-in; } @-webkit-keyframes cubeTransform93 { 0%, 62.01% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 77.01% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 92.01%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform93 { 0%, 62.01% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 77.01% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 92.01%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(95) { -webkit-animation: cubeTransform94 10s infinite ease-in; animation: cubeTransform94 10s infinite ease-in; } @-webkit-keyframes cubeTransform94 { 0%, 27.03% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 42.03% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 57.03%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform94 { 0%, 27.03% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 42.03% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 57.03%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(96) { -webkit-animation: cubeTransform95 10s infinite ease-in; animation: cubeTransform95 10s infinite ease-in; } @-webkit-keyframes cubeTransform95 { 0%, 52.04% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 67.04% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 82.04%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform95 { 0%, 52.04% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 67.04% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 82.04%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(97) { -webkit-animation: cubeTransform96 10s infinite ease-in; animation: cubeTransform96 10s infinite ease-in; } @-webkit-keyframes cubeTransform96 { 0%, 5.61% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 20.61% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 35.61%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform96 { 0%, 5.61% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 20.61% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 35.61%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .cube:nth-child(98) { -webkit-animation: cubeTransform97 10s infinite ease-in; animation: cubeTransform97 10s infinite ease-in; } @-webkit-keyframes cubeTransform97 { 0%, 56.24% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 71.24% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 86.24%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform97 { 0%, 56.24% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 71.24% { transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 86.24%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } .mainCube { --hSize: 1.5em; --bgSize: 3em; } i { position: absolute; inset: 0; background-color: hsl(var(--hue), 75%, 75%); background-size: var(--bgSize) var(--bgSize); background-image: radial-gradient(transparent, #000 var(--bgSize)); } i:nth-child(1) { --hue: 0; background-position: calc((var(--x, 0) + 2) * 25%) calc((var(--y, 0) + 2) * 25%); transform: translateZ(var(--hSize)); } i:nth-child(2) { --hue: 60; background-position: calc((2 - var(--z, 0)) * 25%) calc((var(--y, 0) + 2) * 25%); transform: rotateY(90deg) translateZ(var(--hSize)); } i:nth-child(3) { --hue: 120; background-position: calc((2 - var(--x, 0)) * 25%) calc((var(--y, 0) + 2) * 25%); transform: rotateY(180deg) translateZ(var(--hSize)); } i:nth-child(4) { --hue: 180; background-position: calc((var(--z, 0) + 2) * 25%) calc((var(--y, 0) + 2) * 25%); transform: rotateY(270deg) translateZ(var(--hSize)); } i:nth-child(5) { --hue: 240; background-position: calc((var(--x, 0) + 2) * 25%) calc((var(--z, 0) + 2) * 25%); transform: rotateX(90deg) translateZ(var(--hSize)); } i:nth-child(6) { --hue: 300; background-position: calc((var(--x, 0) + 2) * 25%) calc((2 - var(--z, 0)) * 25%); transform: rotateX(270deg) translateZ(var(--hSize)); }