css实现立体大方块分裂成许多小方块动画效果代码

代码语言:html

所属分类:动画

代码描述:css实现立体大方块分裂成许多小方块动画效果代码

代码标签: 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