css实现立体大方块分裂成许多小方块动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现立体大方块分裂成许多小方块动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { 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%, 52.05% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 67.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; } 82.05%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform0 { 0%, 52.05% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 67.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; } 82.05%, 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%, 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 cubeTransform1 { 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(3) { -webkit-animation: cubeTransform2 10s infinite ease-in; animation: cubeTransform2 10s infinite ease-in; } @-webkit-keyframes cubeTransform2 { 0%, 57.63% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 72.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; } 87.63%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform2 { 0%, 57.63% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 72.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; } 87.63%, 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%, 10.51% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 25.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; } 40.51%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform3 { 0%, 10.51% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 25.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; } 40.51%, 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%, 33.82% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 48.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; } 63.82%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform4 { 0%, 33.82% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 48.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; } 63.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%, 45.14% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 60.14% { 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.14%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform5 { 0%, 45.14% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 60.14% { 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.14%, 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%, 22.36% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 37.36% { 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.36%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform6 { 0%, 22.36% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 37.36% { 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.36%, 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%, 29.21% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 44.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; } 59.21%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform7 { 0%, 29.21% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 44.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; } 59.21%, 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%, 4.45% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 19.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; } 34.45%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform8 { 0%, 4.45% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 19.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; } 34.45%, 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%, 20.98% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 35.98% { 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; } 50.98%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform9 { 0%, 20.98% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 35.98% { 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; } 50.98%, 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%, 57.99% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 72.99% { 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.99%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform10 { 0%, 57.99% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 72.99% { 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.99%, 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%, 6.66% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 21.66% { 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; } 36.66%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform11 { 0%, 6.66% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 21.66% { 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; } 36.66%, 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%, 8.83% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 23.83% { 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.83%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform12 { 0%, 8.83% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 23.83% { 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.83%, 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%, 3.7% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 18.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; } 33.7%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform13 { 0%, 3.7% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 18.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; } 33.7%, 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%, 16.56% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 31.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; } 46.56%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform14 { 0%, 16.56% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 31.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; } 46.56%, 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%, 27.75% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 42.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; } 57.75%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform15 { 0%, 27.75% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 42.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; } 57.75%, 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%, 47.63% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 62.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; } 77.63%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform16 { 0%, 47.63% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 62.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; } 77.63%, 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%, 23.73% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 38.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; } 53.73%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform17 { 0%, 23.73% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 38.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; } 53.73%, 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%, 12.88% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 27.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; } 42.88%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform18 { 0%, 12.88% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 27.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; } 42.88%, 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%, 52.24% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 67.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; } 82.24%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform19 { 0%, 52.24% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 67.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; } 82.24%, 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%, 54.97% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 69.97% { 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.97%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform20 { 0%, 54.97% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 69.97% { 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.97%, 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%, 21.98% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 36.98% { 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; } 51.98%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform21 { 0%, 21.98% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 36.98% { 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; } 51.98%, 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%, 0.54% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 15.54% { 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.54%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform22 { 0%, 0.54% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 15.54% { 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.54%, 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%, 53.88% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 68.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; } 83.88%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform23 { 0%, 53.88% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 68.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; } 83.88%, 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%, 18.82% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 33.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; } 48.82%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform24 { 0%, 18.82% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 33.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; } 48.82%, 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%, 56.52% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 71.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; } 86.52%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform25 { 0%, 56.52% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 71.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; } 86.52%, 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%, 66.9% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 81.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; } 96.9%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform26 { 0%, 66.9% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 81.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; } 96.9%, 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%, 9.8% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 24.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; } 39.8%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform27 { 0%, 9.8% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 24.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; } 39.8%, 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%, 40.61% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 55.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; } 70.61%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform28 { 0%, 40.61% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 55.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; } 70.61%, 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%, 15.69% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 30.69% { 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; } 45.69%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform29 { 0%, 15.69% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 30.69% { 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; } 45.69%, 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%, 64.27% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 79.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; } 94.27%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform30 { 0%, 64.27% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 79.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; } 94.27%, 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%, 43.08% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 58.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; } 73.08%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform31 { 0%, 43.08% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 58.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; } 73.08%, 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%, 13.91% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 28.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; } 43.91%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform32 { 0%, 13.91% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 28.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; } 43.91%, 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%, 45.21% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 60.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; } 75.21%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform33 { 0%, 45.21% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 60.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; } 75.21%, 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%, 67.72% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 82.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; } 97.72%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform34 { 0%, 67.72% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 82.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; } 97.72%, 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%, 51.53% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 66.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; } 81.53%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform35 { 0%, 51.53% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 66.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; } 81.53%, 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%, 21.96% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 36.96% { 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; } 51.96%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform36 { 0%, 21.96% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 36.96% { 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; } 51.96%, 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%, 60.57% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 75.57% { 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; } 90.57%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform37 { 0%, 60.57% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 75.57% { 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; } 90.57%, 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.52% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 42.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; } 57.52%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform38 { 0%, 27.52% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 42.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; } 57.52%, 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%, 1.01% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 16.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; } 31.01%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform39 { 0%, 1.01% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 16.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; } 31.01%, 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%, 20.36% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 35.36% { 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; } 50.36%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform40 { 0%, 20.36% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 35.36% { 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; } 50.36%, 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%, 18.61% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 33.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; } 48.61%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform41 { 0%, 18.61% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 33.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; } 48.61%, 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%, 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 cubeTransform42 { 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(44) { -webkit-animation: cubeTransform43 10s infinite ease-in; animation: cubeTransform43 10s infinite ease-in; } @-webkit-keyframes cubeTransform43 { 0%, 61.73% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 76.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; } 91.73%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform43 { 0%, 61.73% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 76.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; } 91.73%, 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%, 4.68% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 19.68% { 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; } 34.68%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform44 { 0%, 4.68% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 19.68% { 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; } 34.68%, 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%, 14% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 29% { 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%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform45 { 0%, 14% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 29% { 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%, 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%, 37.47% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 52.47% { 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.47%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform46 { 0%, 37.47% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 52.47% { 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.47%, 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%, 52.34% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 67.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; } 82.34%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform47 { 0%, 52.34% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 67.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; } 82.34%, 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%, 68.6% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 83.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; } 98.6%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform48 { 0%, 68.6% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 83.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; } 98.6%, 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%, 55.58% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 70.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; } 85.58%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform49 { 0%, 55.58% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 70.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; } 85.58%, 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%, 16.78% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 31.78% { 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.78%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform50 { 0%, 16.78% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 31.78% { 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.78%, 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%, 62.52% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 77.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; } 92.52%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform51 { 0%, 62.52% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 77.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; } 92.52%, 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%, 9.65% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 24.65% { 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; } 39.65%, 100% { transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0); } } @keyframes cubeTransform52 { 0%, 9.65% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 24.65% { 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; } 39.65%, 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%, 19.64% { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1); } 34.64% { 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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0