css实现文字切片散落及合成动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：css实现文字切片散落及合成动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>

<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Anton'>
<style>
    body {
  background: #140505;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  -webkit-perspective: 800px;
          perspective: 800px;
}

#ui .text {
  position: absolute;
  font-size: 8rem;
  color: #fff;
  line-height: 8rem;
  opacity: 0;
  font-family: 'Anton', sans-serif;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}
#ui .text:nth-child(1) {
  color: #fd3203;
  -webkit-clip-path: polygon(0% 0%, 0% 50%, 10% 50%);
          clip-path: polygon(0% 0%, 0% 50%, 10% 50%);
  -webkit-transform-origin: -23% 9%;
          transform-origin: -23% 9%;
  -webkit-animation: fly1 5000ms 0ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly1 5000ms 0ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly1 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-130deg) rotateY(-115deg) rotateZ(27deg) translateZ(331px);
            transform: translate(-50%, -50%) rotateX(-130deg) rotateY(-115deg) rotateZ(27deg) translateZ(331px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-130deg) rotateY(-115deg) rotateZ(27deg) translateZ(331px);
            transform: translate(-50%, -50%) rotateX(-130deg) rotateY(-115deg) rotateZ(27deg) translateZ(331px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly1 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-130deg) rotateY(-115deg) rotateZ(27deg) translateZ(331px);
            transform: translate(-50%, -50%) rotateX(-130deg) rotateY(-115deg) rotateZ(27deg) translateZ(331px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-130deg) rotateY(-115deg) rotateZ(27deg) translateZ(331px);
            transform: translate(-50%, -50%) rotateX(-130deg) rotateY(-115deg) rotateZ(27deg) translateZ(331px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(2) {
  color: #fb3106;
  -webkit-clip-path: polygon(0% 0%, 10% 0%, 10% 50%);
          clip-path: polygon(0% 0%, 10% 0%, 10% 50%);
  -webkit-transform-origin: 18% 37%;
          transform-origin: 18% 37%;
  -webkit-animation: fly2 5000ms 40ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly2 5000ms 40ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly2 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(339deg) rotateY(-417deg) rotateZ(-204deg) translateZ(-1138px);
            transform: translate(-50%, -50%) rotateX(339deg) rotateY(-417deg) rotateZ(-204deg) translateZ(-1138px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(339deg) rotateY(-417deg) rotateZ(-204deg) translateZ(-1138px);
            transform: translate(-50%, -50%) rotateX(339deg) rotateY(-417deg) rotateZ(-204deg) translateZ(-1138px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly2 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(339deg) rotateY(-417deg) rotateZ(-204deg) translateZ(-1138px);
            transform: translate(-50%, -50%) rotateX(339deg) rotateY(-417deg) rotateZ(-204deg) translateZ(-1138px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(339deg) rotateY(-417deg) rotateZ(-204deg) translateZ(-1138px);
            transform: translate(-50%, -50%) rotateX(339deg) rotateY(-417deg) rotateZ(-204deg) translateZ(-1138px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(3) {
  color: #f93109;
  -webkit-clip-path: polygon(10% 0%, 10% 50%, 20% 50%);
          clip-path: polygon(10% 0%, 10% 50%, 20% 50%);
  -webkit-transform-origin: 40% -12%;
          transform-origin: 40% -12%;
  -webkit-animation: fly3 5000ms 80ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly3 5000ms 80ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly3 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-227deg) rotateY(-85deg) rotateZ(-344deg) translateZ(-1310px);
            transform: translate(-50%, -50%) rotateX(-227deg) rotateY(-85deg) rotateZ(-344deg) translateZ(-1310px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-227deg) rotateY(-85deg) rotateZ(-344deg) translateZ(-1310px);
            transform: translate(-50%, -50%) rotateX(-227deg) rotateY(-85deg) rotateZ(-344deg) translateZ(-1310px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly3 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-227deg) rotateY(-85deg) rotateZ(-344deg) translateZ(-1310px);
            transform: translate(-50%, -50%) rotateX(-227deg) rotateY(-85deg) rotateZ(-344deg) translateZ(-1310px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-227deg) rotateY(-85deg) rotateZ(-344deg) translateZ(-1310px);
            transform: translate(-50%, -50%) rotateX(-227deg) rotateY(-85deg) rotateZ(-344deg) translateZ(-1310px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(4) {
  color: #f7300c;
  -webkit-clip-path: polygon(10% 0%, 20% 0%, 20% 50%);
          clip-path: polygon(10% 0%, 20% 0%, 20% 50%);
  -webkit-transform-origin: 40% -45%;
          transform-origin: 40% -45%;
  -webkit-animation: fly4 5000ms 120ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly4 5000ms 120ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly4 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(132deg) rotateY(-304deg) rotateZ(181deg) translateZ(-1268px);
            transform: translate(-50%, -50%) rotateX(132deg) rotateY(-304deg) rotateZ(181deg) translateZ(-1268px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(132deg) rotateY(-304deg) rotateZ(181deg) translateZ(-1268px);
            transform: translate(-50%, -50%) rotateX(132deg) rotateY(-304deg) rotateZ(181deg) translateZ(-1268px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly4 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(132deg) rotateY(-304deg) rotateZ(181deg) translateZ(-1268px);
            transform: translate(-50%, -50%) rotateX(132deg) rotateY(-304deg) rotateZ(181deg) translateZ(-1268px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(132deg) rotateY(-304deg) rotateZ(181deg) translateZ(-1268px);
            transform: translate(-50%, -50%) rotateX(132deg) rotateY(-304deg) rotateZ(181deg) translateZ(-1268px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(5) {
  color: #f5300f;
  -webkit-clip-path: polygon(20% 0%, 20% 50%, 30% 50%);
          clip-path: polygon(20% 0%, 20% 50%, 30% 50%);
  -webkit-transform-origin: -4% -6%;
          transform-origin: -4% -6%;
  -webkit-animation: fly5 5000ms 160ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly5 5000ms 160ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly5 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(142deg) rotateY(12deg) rotateZ(-111deg) translateZ(-1328px);
            transform: translate(-50%, -50%) rotateX(142deg) rotateY(12deg) rotateZ(-111deg) translateZ(-1328px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(142deg) rotateY(12deg) rotateZ(-111deg) translateZ(-1328px);
            transform: translate(-50%, -50%) rotateX(142deg) rotateY(12deg) rotateZ(-111deg) translateZ(-1328px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly5 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(142deg) rotateY(12deg) rotateZ(-111deg) translateZ(-1328px);
            transform: translate(-50%, -50%) rotateX(142deg) rotateY(12deg) rotateZ(-111deg) translateZ(-1328px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(142deg) rotateY(12deg) rotateZ(-111deg) translateZ(-1328px);
            transform: translate(-50%, -50%) rotateX(142deg) rotateY(12deg) rotateZ(-111deg) translateZ(-1328px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(6) {
  color: #f32f12;
  -webkit-clip-path: polygon(20% 0%, 30% 0%, 30% 50%);
          clip-path: polygon(20% 0%, 30% 0%, 30% 50%);
  -webkit-transform-origin: -28% -40%;
          transform-origin: -28% -40%;
  -webkit-animation: fly6 5000ms 200ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly6 5000ms 200ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly6 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(30deg) rotateY(29deg) rotateZ(134deg) translateZ(-1405px);
            transform: translate(-50%, -50%) rotateX(30deg) rotateY(29deg) rotateZ(134deg) translateZ(-1405px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(30deg) rotateY(29deg) rotateZ(134deg) translateZ(-1405px);
            transform: translate(-50%, -50%) rotateX(30deg) rotateY(29deg) rotateZ(134deg) translateZ(-1405px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly6 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(30deg) rotateY(29deg) rotateZ(134deg) translateZ(-1405px);
            transform: translate(-50%, -50%) rotateX(30deg) rotateY(29deg) rotateZ(134deg) translateZ(-1405px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(30deg) rotateY(29deg) rotateZ(134deg) translateZ(-1405px);
            transform: translate(-50%, -50%) rotateX(30deg) rotateY(29deg) rotateZ(134deg) translateZ(-1405px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(7) {
  color: #f12f15;
  -webkit-clip-path: polygon(30% 0%, 30% 50%, 40% 50%);
          clip-path: polygon(30% 0%, 30% 50%, 40% 50%);
  -webkit-transform-origin: 78% -7%;
          transform-origin: 78% -7%;
  -webkit-animation: fly7 5000ms 240ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly7 5000ms 240ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly7 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(378deg) rotateY(35deg) rotateZ(94deg) translateZ(-1064px);
            transform: translate(-50%, -50%) rotateX(378deg) rotateY(35deg) rotateZ(94deg) translateZ(-1064px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(378deg) rotateY(35deg) rotateZ(94deg) translateZ(-1064px);
            transform: translate(-50%, -50%) rotateX(378deg) rotateY(35deg) rotateZ(94deg) translateZ(-1064px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly7 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(378deg) rotateY(35deg) rotateZ(94deg) translateZ(-1064px);
            transform: translate(-50%, -50%) rotateX(378deg) rotateY(35deg) rotateZ(94deg) translateZ(-1064px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(378deg) rotateY(35deg) rotateZ(94deg) translateZ(-1064px);
            transform: translate(-50%, -50%) rotateX(378deg) rotateY(35deg) rotateZ(94deg) translateZ(-1064px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(8) {
  color: #ef2e18;
  -webkit-clip-path: polygon(30% 0%, 40% 0%, 40% 50%);
          clip-path: polygon(30% 0%, 40% 0%, 40% 50%);
  -webkit-transform-origin: 59% 44%;
          transform-origin: 59% 44%;
  -webkit-animation: fly8 5000ms 280ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly8 5000ms 280ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly8 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-268deg) rotateY(-321deg) rotateZ(379deg) translateZ(-367px);
            transform: translate(-50%, -50%) rotateX(-268deg) rotateY(-321deg) rotateZ(379deg) translateZ(-367px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-268deg) rotateY(-321deg) rotateZ(379deg) translateZ(-367px);
            transform: translate(-50%, -50%) rotateX(-268deg) rotateY(-321deg) rotateZ(379deg) translateZ(-367px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly8 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-268deg) rotateY(-321deg) rotateZ(379deg) translateZ(-367px);
            transform: translate(-50%, -50%) rotateX(-268deg) rotateY(-321deg) rotateZ(379deg) translateZ(-367px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-268deg) rotateY(-321deg) rotateZ(379deg) translateZ(-367px);
            transform: translate(-50%, -50%) rotateX(-268deg) rotateY(-321deg) rotateZ(379deg) translateZ(-367px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(9) {
  color: #ed2e1b;
  -webkit-clip-path: polygon(40% 0%, 40% 50%, 50% 50%);
          clip-path: polygon(40% 0%, 40% 50%, 50% 50%);
  -webkit-transform-origin: 51% 26%;
          transform-origin: 51% 26%;
  -webkit-animation: fly9 5000ms 320ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly9 5000ms 320ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly9 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-292deg) rotateY(318deg) rotateZ(163deg) translateZ(-198px);
            transform: translate(-50%, -50%) rotateX(-292deg) rotateY(318deg) rotateZ(163deg) translateZ(-198px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-292deg) rotateY(318deg) rotateZ(163deg) translateZ(-198px);
            transform: translate(-50%, -50%) rotateX(-292deg) rotateY(318deg) rotateZ(163deg) translateZ(-198px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly9 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-292deg) rotateY(318deg) rotateZ(163deg) translateZ(-198px);
            transform: translate(-50%, -50%) rotateX(-292deg) rotateY(318deg) rotateZ(163deg) translateZ(-198px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-292deg) rotateY(318deg) rotateZ(163deg) translateZ(-198px);
            transform: translate(-50%, -50%) rotateX(-292deg) rotateY(318deg) rotateZ(163deg) translateZ(-198px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(10) {
  color: #eb2d1e;
  -webkit-clip-path: polygon(40% 0%, 50% 0%, 50% 50%);
          clip-path: polygon(40% 0%, 50% 0%, 50% 50%);
  -webkit-transform-origin: 25% -2%;
          transform-origin: 25% -2%;
  -webkit-animation: fly10 5000ms 360ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly10 5000ms 360ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly10 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(266deg) rotateY(122deg) rotateZ(372deg) translateZ(-137px);
            transform: translate(-50%, -50%) rotateX(266deg) rotateY(122deg) rotateZ(372deg) translateZ(-137px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(266deg) rotateY(122deg) rotateZ(372deg) translateZ(-137px);
            transform: translate(-50%, -50%) rotateX(266deg) rotateY(122deg) rotateZ(372deg) translateZ(-137px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly10 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(266deg) rotateY(122deg) rotateZ(372deg) translateZ(-137px);
            transform: translate(-50%, -50%) rotateX(266deg) rotateY(122deg) rotateZ(372deg) translateZ(-137px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(266deg) rotateY(122deg) rotateZ(372deg) translateZ(-137px);
            transform: translate(-50%, -50%) rotateX(266deg) rotateY(122deg) rotateZ(372deg) translateZ(-137px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(11) {
  color: #e92d21;
  -webkit-clip-path: polygon(50% 0%, 50% 50%, 60% 50%);
          clip-path: polygon(50% 0%, 50% 50%, 60% 50%);
  -webkit-transform-origin: 48% -29%;
          transform-origin: 48% -29%;
  -webkit-animation: fly11 5000ms 400ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly11 5000ms 400ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly11 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(466deg) rotateY(-42deg) rotateZ(-337deg) translateZ(-320px);
            transform: translate(-50%, -50%) rotateX(466deg) rotateY(-42deg) rotateZ(-337deg) translateZ(-320px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(466deg) rotateY(-42deg) rotateZ(-337deg) translateZ(-320px);
            transform: translate(-50%, -50%) rotateX(466deg) rotateY(-42deg) rotateZ(-337deg) translateZ(-320px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly11 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(466deg) rotateY(-42deg) rotateZ(-337deg) translateZ(-320px);
            transform: translate(-50%, -50%) rotateX(466deg) rotateY(-42deg) rotateZ(-337deg) translateZ(-320px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(466deg) rotateY(-42deg) rotateZ(-337deg) translateZ(-320px);
            transform: translate(-50%, -50%) rotateX(466deg) rotateY(-42deg) rotateZ(-337deg) translateZ(-320px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(12) {
  color: #e72c24;
  -webkit-clip-path: polygon(50% 0%, 60% 0%, 60% 50%);
          clip-path: polygon(50% 0%, 60% 0%, 60% 50%);
  -webkit-transform-origin: 6% 18%;
          transform-origin: 6% 18%;
  -webkit-animation: fly12 5000ms 440ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly12 5000ms 440ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly12 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(479deg) rotateY(448deg) rotateZ(-90deg) translateZ(-760px);
            transform: translate(-50%, -50%) rotateX(479deg) rotateY(448deg) rotateZ(-90deg) translateZ(-760px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(479deg) rotateY(448deg) rotateZ(-90deg) translateZ(-760px);
            transform: translate(-50%, -50%) rotateX(479deg) rotateY(448deg) rotateZ(-90deg) translateZ(-760px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly12 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(479deg) rotateY(448deg) rotateZ(-90deg) translateZ(-760px);
            transform: translate(-50%, -50%) rotateX(479deg) rotateY(448deg) rotateZ(-90deg) translateZ(-760px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(479deg) rotateY(448deg) rotateZ(-90deg) translateZ(-760px);
            transform: translate(-50%, -50%) rotateX(479deg) rotateY(448deg) rotateZ(-90deg) translateZ(-760px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(13) {
  color: #e52c27;
  -webkit-clip-path: polygon(60% 0%, 60% 50%, 70% 50%);
          clip-path: polygon(60% 0%, 60% 50%, 70% 50%);
  -webkit-transform-origin: 101% 6%;
          transform-origin: 101% 6%;
  -webkit-animation: fly13 5000ms 480ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly13 5000ms 480ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly13 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-225deg) rotateY(484deg) rotateZ(435deg) translateZ(-1589px);
            transform: translate(-50%, -50%) rotateX(-225deg) rotateY(484deg) rotateZ(435deg) translateZ(-1589px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-225deg) rotateY(484deg) rotateZ(435deg) translateZ(-1589px);
            transform: translate(-50%, -50%) rotateX(-225deg) rotateY(484deg) rotateZ(435deg) translateZ(-1589px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly13 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-225deg) rotateY(484deg) rotateZ(435deg) translateZ(-1589px);
            transform: translate(-50%, -50%) rotateX(-225deg) rotateY(484deg) rotateZ(435deg) translateZ(-1589px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-225deg) rotateY(484deg) rotateZ(435deg) translateZ(-1589px);
            transform: translate(-50%, -50%) rotateX(-225deg) rotateY(484deg) rotateZ(435deg) translateZ(-1589px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(14) {
  color: #e32b2a;
  -webkit-clip-path: polygon(60% 0%, 70% 0%, 70% 50%);
          clip-path: polygon(60% 0%, 70% 0%, 70% 50%);
  -webkit-transform-origin: 89% -4%;
          transform-origin: 89% -4%;
  -webkit-animation: fly14 5000ms 520ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly14 5000ms 520ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly14 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-306deg) rotateY(500deg) rotateZ(307deg) translateZ(-454px);
            transform: translate(-50%, -50%) rotateX(-306deg) rotateY(500deg) rotateZ(307deg) translateZ(-454px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-306deg) rotateY(500deg) rotateZ(307deg) translateZ(-454px);
            transform: translate(-50%, -50%) rotateX(-306deg) rotateY(500deg) rotateZ(307deg) translateZ(-454px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly14 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-306deg) rotateY(500deg) rotateZ(307deg) translateZ(-454px);
            transform: translate(-50%, -50%) rotateX(-306deg) rotateY(500deg) rotateZ(307deg) translateZ(-454px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-306deg) rotateY(500deg) rotateZ(307deg) translateZ(-454px);
            transform: translate(-50%, -50%) rotateX(-306deg) rotateY(500deg) rotateZ(307deg) translateZ(-454px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(15) {
  color: #e12b2d;
  -webkit-clip-path: polygon(70% 0%, 70% 50%, 80% 50%);
          clip-path: polygon(70% 0%, 70% 50%, 80% 50%);
  -webkit-transform-origin: 52% -17%;
          transform-origin: 52% -17%;
  -webkit-animation: fly15 5000ms 560ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly15 5000ms 560ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly15 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-7deg) rotateY(-171deg) rotateZ(-89deg) translateZ(245px);
            transform: translate(-50%, -50%) rotateX(-7deg) rotateY(-171deg) rotateZ(-89deg) translateZ(245px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-7deg) rotateY(-171deg) rotateZ(-89deg) translateZ(245px);
            transform: translate(-50%, -50%) rotateX(-7deg) rotateY(-171deg) rotateZ(-89deg) translateZ(245px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly15 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-7deg) rotateY(-171deg) rotateZ(-89deg) translateZ(245px);
            transform: translate(-50%, -50%) rotateX(-7deg) rotateY(-171deg) rotateZ(-89deg) translateZ(245px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-7deg) rotateY(-171deg) rotateZ(-89deg) translateZ(245px);
            transform: translate(-50%, -50%) rotateX(-7deg) rotateY(-171deg) rotateZ(-89deg) translateZ(245px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(16) {
  color: #df2a30;
  -webkit-clip-path: polygon(70% 0%, 80% 0%, 80% 50%);
          clip-path: polygon(70% 0%, 80% 0%, 80% 50%);
  -webkit-transform-origin: 115% 41%;
          transform-origin: 115% 41%;
  -webkit-animation: fly16 5000ms 600ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly16 5000ms 600ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly16 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-421deg) rotateY(21deg) rotateZ(137deg) translateZ(-1364px);
            transform: translate(-50%, -50%) rotateX(-421deg) rotateY(21deg) rotateZ(137deg) translateZ(-1364px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-421deg) rotateY(21deg) rotateZ(137deg) translateZ(-1364px);
            transform: translate(-50%, -50%) rotateX(-421deg) rotateY(21deg) rotateZ(137deg) translateZ(-1364px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly16 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-421deg) rotateY(21deg) rotateZ(137deg) translateZ(-1364px);
            transform: translate(-50%, -50%) rotateX(-421deg) rotateY(21deg) rotateZ(137deg) translateZ(-1364px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-421deg) rotateY(21deg) rotateZ(137deg) translateZ(-1364px);
            transform: translate(-50%, -50%) rotateX(-421deg) rotateY(21deg) rotateZ(137deg) translateZ(-1364px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(17) {
  color: #dd2a33;
  -webkit-clip-path: polygon(80% 0%, 80% 50%, 90% 50%);
          clip-path: polygon(80% 0%, 80% 50%, 90% 50%);
  -webkit-transform-origin: 111% -37%;
          transform-origin: 111% -37%;
  -webkit-animation: fly17 5000ms 640ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly17 5000ms 640ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly17 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(467deg) rotateY(-172deg) rotateZ(-77deg) translateZ(2px);
            transform: translate(-50%, -50%) rotateX(467deg) rotateY(-172deg) rotateZ(-77deg) translateZ(2px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(467deg) rotateY(-172deg) rotateZ(-77deg) translateZ(2px);
            transform: translate(-50%, -50%) rotateX(467deg) rotateY(-172deg) rotateZ(-77deg) translateZ(2px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly17 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(467deg) rotateY(-172deg) rotateZ(-77deg) translateZ(2px);
            transform: translate(-50%, -50%) rotateX(467deg) rotateY(-172deg) rotateZ(-77deg) translateZ(2px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(467deg) rotateY(-172deg) rotateZ(-77deg) translateZ(2px);
            transform: translate(-50%, -50%) rotateX(467deg) rotateY(-172deg) rotateZ(-77deg) translateZ(2px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(18) {
  color: #db2936;
  -webkit-clip-path: polygon(80% 0%, 90% 0%, 90% 50%);
          clip-path: polygon(80% 0%, 90% 0%, 90% 50%);
  -webkit-transform-origin: 123% 9%;
          transform-origin: 123% 9%;
  -webkit-animation: fly18 5000ms 680ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly18 5000ms 680ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly18 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(490deg) rotateY(-204deg) rotateZ(-161deg) translateZ(-2034px);
            transform: translate(-50%, -50%) rotateX(490deg) rotateY(-204deg) rotateZ(-161deg) translateZ(-2034px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(490deg) rotateY(-204deg) rotateZ(-161deg) translateZ(-2034px);
            transform: translate(-50%, -50%) rotateX(490deg) rotateY(-204deg) rotateZ(-161deg) translateZ(-2034px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly18 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(490deg) rotateY(-204deg) rotateZ(-161deg) translateZ(-2034px);
            transform: translate(-50%, -50%) rotateX(490deg) rotateY(-204deg) rotateZ(-161deg) translateZ(-2034px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(490deg) rotateY(-204deg) rotateZ(-161deg) translateZ(-2034px);
            transform: translate(-50%, -50%) rotateX(490deg) rotateY(-204deg) rotateZ(-161deg) translateZ(-2034px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(19) {
  color: #d92939;
  -webkit-clip-path: polygon(90% 0%, 90% 50%, 100% 50%);
          clip-path: polygon(90% 0%, 90% 50%, 100% 50%);
  -webkit-transform-origin: 90% 48%;
          transform-origin: 90% 48%;
  -webkit-animation: fly19 5000ms 720ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly19 5000ms 720ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly19 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(401deg) rotateY(-31deg) rotateZ(232deg) translateZ(247px);
            transform: translate(-50%, -50%) rotateX(401deg) rotateY(-31deg) rotateZ(232deg) translateZ(247px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(401deg) rotateY(-31deg) rotateZ(232deg) translateZ(247px);
            transform: translate(-50%, -50%) rotateX(401deg) rotateY(-31deg) rotateZ(232deg) translateZ(247px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly19 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(401deg) rotateY(-31deg) rotateZ(232deg) translateZ(247px);
            transform: translate(-50%, -50%) rotateX(401deg) rotateY(-31deg) rotateZ(232deg) translateZ(247px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(401deg) rotateY(-31deg) rotateZ(232deg) translateZ(247px);
            transform: translate(-50%, -50%) rotateX(401deg) rotateY(-31deg) rotateZ(232deg) translateZ(247px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(20) {
  color: #d7283c;
  -webkit-clip-path: polygon(90% 0%, 100% 0%, 100% 50%);
          clip-path: polygon(90% 0%, 100% 0%, 100% 50%);
  -webkit-transform-origin: 79% -2%;
          transform-origin: 79% -2%;
  -webkit-animation: fly20 5000ms 760ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly20 5000ms 760ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly20 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-378deg) rotateY(-210deg) rotateZ(-229deg) translateZ(339px);
            transform: translate(-50%, -50%) rotateX(-378deg) rotateY(-210deg) rotateZ(-229deg) translateZ(339px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-378deg) rotateY(-210deg) rotateZ(-229deg) translateZ(339px);
            transform: translate(-50%, -50%) rotateX(-378deg) rotateY(-210deg) rotateZ(-229deg) translateZ(339px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly20 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-378deg) rotateY(-210deg) rotateZ(-229deg) translateZ(339px);
            transform: translate(-50%, -50%) rotateX(-378deg) rotateY(-210deg) rotateZ(-229deg) translateZ(339px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-378deg) rotateY(-210deg) rotateZ(-229deg) translateZ(339px);
            transform: translate(-50%, -50%) rotateX(-378deg) rotateY(-210deg) rotateZ(-229deg) translateZ(339px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(21) {
  color: #d5283f;
  -webkit-clip-path: polygon(0% 50%, 0% 100%, 10% 100%);
          clip-path: polygon(0% 50%, 0% 100%, 10% 100%);
  -webkit-transform-origin: -4% 73%;
          transform-origin: -4% 73%;
  -webkit-animation: fly21 5000ms 800ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly21 5000ms 800ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly21 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(155deg) rotateY(113deg) rotateZ(287deg) translateZ(-857px);
            transform: translate(-50%, -50%) rotateX(155deg) rotateY(113deg) rotateZ(287deg) translateZ(-857px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(155deg) rotateY(113deg) rotateZ(287deg) translateZ(-857px);
            transform: translate(-50%, -50%) rotateX(155deg) rotateY(113deg) rotateZ(287deg) translateZ(-857px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly21 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(155deg) rotateY(113deg) rotateZ(287deg) translateZ(-857px);
            transform: translate(-50%, -50%) rotateX(155deg) rotateY(113deg) rotateZ(287deg) translateZ(-857px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(155deg) rotateY(113deg) rotateZ(287deg) translateZ(-857px);
            transform: translate(-50%, -50%) rotateX(155deg) rotateY(113deg) rotateZ(287deg) translateZ(-857px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(22) {
  color: #d32742;
  -webkit-clip-path: polygon(0% 50%, 10% 50%, 10% 100%);
          clip-path: polygon(0% 50%, 10% 50%, 10% 100%);
  -webkit-transform-origin: 8% 20%;
          transform-origin: 8% 20%;
  -webkit-animation: fly22 5000ms 840ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly22 5000ms 840ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly22 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(33deg) rotateY(458deg) rotateZ(-5deg) translateZ(-419px);
            transform: translate(-50%, -50%) rotateX(33deg) rotateY(458deg) rotateZ(-5deg) translateZ(-419px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(33deg) rotateY(458deg) rotateZ(-5deg) translateZ(-419px);
            transform: translate(-50%, -50%) rotateX(33deg) rotateY(458deg) rotateZ(-5deg) translateZ(-419px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly22 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(33deg) rotateY(458deg) rotateZ(-5deg) translateZ(-419px);
            transform: translate(-50%, -50%) rotateX(33deg) rotateY(458deg) rotateZ(-5deg) translateZ(-419px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(33deg) rotateY(458deg) rotateZ(-5deg) translateZ(-419px);
            transform: translate(-50%, -50%) rotateX(33deg) rotateY(458deg) rotateZ(-5deg) translateZ(-419px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(23) {
  color: #d12745;
  -webkit-clip-path: polygon(10% 50%, 10% 100%, 20% 100%);
          clip-path: polygon(10% 50%, 10% 100%, 20% 100%);
  -webkit-transform-origin: -16% 1%;
          transform-origin: -16% 1%;
  -webkit-animation: fly23 5000ms 880ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly23 5000ms 880ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly23 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(291deg) rotateY(-371deg) rotateZ(473deg) translateZ(-43px);
            transform: translate(-50%, -50%) rotateX(291deg) rotateY(-371deg) rotateZ(473deg) translateZ(-43px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(291deg) rotateY(-371deg) rotateZ(473deg) translateZ(-43px);
            transform: translate(-50%, -50%) rotateX(291deg) rotateY(-371deg) rotateZ(473deg) translateZ(-43px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly23 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(291deg) rotateY(-371deg) rotateZ(473deg) translateZ(-43px);
            transform: translate(-50%, -50%) rotateX(291deg) rotateY(-371deg) rotateZ(473deg) translateZ(-43px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(291deg) rotateY(-371deg) rotateZ(473deg) translateZ(-43px);
            transform: translate(-50%, -50%) rotateX(291deg) rotateY(-371deg) rotateZ(473deg) translateZ(-43px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(24) {
  color: #cf2648;
  -webkit-clip-path: polygon(10% 50%, 20% 50%, 20% 100%);
          clip-path: polygon(10% 50%, 20% 50%, 20% 100%);
  -webkit-transform-origin: 52% 75%;
          transform-origin: 52% 75%;
  -webkit-animation: fly24 5000ms 920ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly24 5000ms 920ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly24 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-297deg) rotateY(43deg) rotateZ(141deg) translateZ(-2279px);
            transform: translate(-50%, -50%) rotateX(-297deg) rotateY(43deg) rotateZ(141deg) translateZ(-2279px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-297deg) rotateY(43deg) rotateZ(141deg) translateZ(-2279px);
            transform: translate(-50%, -50%) rotateX(-297deg) rotateY(43deg) rotateZ(141deg) translateZ(-2279px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly24 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-297deg) rotateY(43deg) rotateZ(141deg) translateZ(-2279px);
            transform: translate(-50%, -50%) rotateX(-297deg) rotateY(43deg) rotateZ(141deg) translateZ(-2279px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-297deg) rotateY(43deg) rotateZ(141deg) translateZ(-2279px);
            transform: translate(-50%, -50%) rotateX(-297deg) rotateY(43deg) rotateZ(141deg) translateZ(-2279px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(25) {
  color: #cd264b;
  -webkit-clip-path: polygon(20% 50%, 20% 100%, 30% 100%);
          clip-path: polygon(20% 50%, 20% 100%, 30% 100%);
  -webkit-transform-origin: 6% 26%;
          transform-origin: 6% 26%;
  -webkit-animation: fly25 5000ms 960ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly25 5000ms 960ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly25 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(233deg) rotateY(-182deg) rotateZ(-368deg) translateZ(88px);
            transform: translate(-50%, -50%) rotateX(233deg) rotateY(-182deg) rotateZ(-368deg) translateZ(88px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(233deg) rotateY(-182deg) rotateZ(-368deg) translateZ(88px);
            transform: translate(-50%, -50%) rotateX(233deg) rotateY(-182deg) rotateZ(-368deg) translateZ(88px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly25 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(233deg) rotateY(-182deg) rotateZ(-368deg) translateZ(88px);
            transform: translate(-50%, -50%) rotateX(233deg) rotateY(-182deg) rotateZ(-368deg) translateZ(88px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(233deg) rotateY(-182deg) rotateZ(-368deg) translateZ(88px);
            transform: translate(-50%, -50%) rotateX(233deg) rotateY(-182deg) rotateZ(-368deg) translateZ(88px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(26) {
  color: #cb254e;
  -webkit-clip-path: polygon(20% 50%, 30% 50%, 30% 100%);
          clip-path: polygon(20% 50%, 30% 50%, 30% 100%);
  -webkit-transform-origin: -15% 40%;
          transform-origin: -15% 40%;
  -webkit-animation: fly26 5000ms 1000ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly26 5000ms 1000ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly26 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(500deg) rotateY(50deg) rotateZ(192deg) translateZ(-677px);
            transform: translate(-50%, -50%) rotateX(500deg) rotateY(50deg) rotateZ(192deg) translateZ(-677px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(500deg) rotateY(50deg) rotateZ(192deg) translateZ(-677px);
            transform: translate(-50%, -50%) rotateX(500deg) rotateY(50deg) rotateZ(192deg) translateZ(-677px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly26 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(500deg) rotateY(50deg) rotateZ(192deg) translateZ(-677px);
            transform: translate(-50%, -50%) rotateX(500deg) rotateY(50deg) rotateZ(192deg) translateZ(-677px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(500deg) rotateY(50deg) rotateZ(192deg) translateZ(-677px);
            transform: translate(-50%, -50%) rotateX(500deg) rotateY(50deg) rotateZ(192deg) translateZ(-677px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(27) {
  color: #c92551;
  -webkit-clip-path: polygon(30% 50%, 30% 100%, 40% 100%);
          clip-path: polygon(30% 50%, 30% 100%, 40% 100%);
  -webkit-transform-origin: -12% 2%;
          transform-origin: -12% 2%;
  -webkit-animation: fly27 5000ms 1040ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly27 5000ms 1040ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly27 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(171deg) rotateY(-389deg) rotateZ(489deg) translateZ(-1811px);
            transform: translate(-50%, -50%) rotateX(171deg) rotateY(-389deg) rotateZ(489deg) translateZ(-1811px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(171deg) rotateY(-389deg) rotateZ(489deg) translateZ(-1811px);
            transform: translate(-50%, -50%) rotateX(171deg) rotateY(-389deg) rotateZ(489deg) translateZ(-1811px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly27 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(171deg) rotateY(-389deg) rotateZ(489deg) translateZ(-1811px);
            transform: translate(-50%, -50%) rotateX(171deg) rotateY(-389deg) rotateZ(489deg) translateZ(-1811px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(171deg) rotateY(-389deg) rotateZ(489deg) translateZ(-1811px);
            transform: translate(-50%, -50%) rotateX(171deg) rotateY(-389deg) rotateZ(489deg) translateZ(-1811px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(28) {
  color: #c72454;
  -webkit-clip-path: polygon(30% 50%, 40% 50%, 40% 100%);
          clip-path: polygon(30% 50%, 40% 50%, 40% 100%);
  -webkit-transform-origin: -14% 79%;
          transform-origin: -14% 79%;
  -webkit-animation: fly28 5000ms 1080ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly28 5000ms 1080ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly28 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-7deg) rotateY(272deg) rotateZ(-410deg) translateZ(-1229px);
            transform: translate(-50%, -50%) rotateX(-7deg) rotateY(272deg) rotateZ(-410deg) translateZ(-1229px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-7deg) rotateY(272deg) rotateZ(-410deg) translateZ(-1229px);
            transform: translate(-50%, -50%) rotateX(-7deg) rotateY(272deg) rotateZ(-410deg) translateZ(-1229px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly28 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-7deg) rotateY(272deg) rotateZ(-410deg) translateZ(-1229px);
            transform: translate(-50%, -50%) rotateX(-7deg) rotateY(272deg) rotateZ(-410deg) translateZ(-1229px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-7deg) rotateY(272deg) rotateZ(-410deg) translateZ(-1229px);
            transform: translate(-50%, -50%) rotateX(-7deg) rotateY(272deg) rotateZ(-410deg) translateZ(-1229px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(29) {
  color: #c52457;
  -webkit-clip-path: polygon(40% 50%, 40% 100%, 50% 100%);
          clip-path: polygon(40% 50%, 40% 100%, 50% 100%);
  -webkit-transform-origin: 89% 54%;
          transform-origin: 89% 54%;
  -webkit-animation: fly29 5000ms 1120ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly29 5000ms 1120ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly29 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-76deg) rotateY(117deg) rotateZ(-62deg) translateZ(240px);
            transform: translate(-50%, -50%) rotateX(-76deg) rotateY(117deg) rotateZ(-62deg) translateZ(240px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-76deg) rotateY(117deg) rotateZ(-62deg) translateZ(240px);
            transform: translate(-50%, -50%) rotateX(-76deg) rotateY(117deg) rotateZ(-62deg) translateZ(240px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly29 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-76deg) rotateY(117deg) rotateZ(-62deg) translateZ(240px);
            transform: translate(-50%, -50%) rotateX(-76deg) rotateY(117deg) rotateZ(-62deg) translateZ(240px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-76deg) rotateY(117deg) rotateZ(-62deg) translateZ(240px);
            transform: translate(-50%, -50%) rotateX(-76deg) rotateY(117deg) rotateZ(-62deg) translateZ(240px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(30) {
  color: #c3235a;
  -webkit-clip-path: polygon(40% 50%, 50% 50%, 50% 100%);
          clip-path: polygon(40% 50%, 50% 50%, 50% 100%);
  -webkit-transform-origin: 50% 66%;
          transform-origin: 50% 66%;
  -webkit-animation: fly30 5000ms 1160ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly30 5000ms 1160ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly30 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-294deg) rotateY(454deg) rotateZ(-21deg) translateZ(-2458px);
            transform: translate(-50%, -50%) rotateX(-294deg) rotateY(454deg) rotateZ(-21deg) translateZ(-2458px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-294deg) rotateY(454deg) rotateZ(-21deg) translateZ(-2458px);
            transform: translate(-50%, -50%) rotateX(-294deg) rotateY(454deg) rotateZ(-21deg) translateZ(-2458px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly30 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-294deg) rotateY(454deg) rotateZ(-21deg) translateZ(-2458px);
            transform: translate(-50%, -50%) rotateX(-294deg) rotateY(454deg) rotateZ(-21deg) translateZ(-2458px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-294deg) rotateY(454deg) rotateZ(-21deg) translateZ(-2458px);
            transform: translate(-50%, -50%) rotateX(-294deg) rotateY(454deg) rotateZ(-21deg) translateZ(-2458px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(31) {
  color: #c1235d;
  -webkit-clip-path: polygon(50% 50%, 50% 100%, 60% 100%);
          clip-path: polygon(50% 50%, 50% 100%, 60% 100%);
  -webkit-transform-origin: 8% 63%;
          transform-origin: 8% 63%;
  -webkit-animation: fly31 5000ms 1200ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly31 5000ms 1200ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly31 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(142deg) rotateY(-93deg) rotateZ(-419deg) translateZ(-2040px);
            transform: translate(-50%, -50%) rotateX(142deg) rotateY(-93deg) rotateZ(-419deg) translateZ(-2040px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(142deg) rotateY(-93deg) rotateZ(-419deg) translateZ(-2040px);
            transform: translate(-50%, -50%) rotateX(142deg) rotateY(-93deg) rotateZ(-419deg) translateZ(-2040px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly31 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(142deg) rotateY(-93deg) rotateZ(-419deg) translateZ(-2040px);
            transform: translate(-50%, -50%) rotateX(142deg) rotateY(-93deg) rotateZ(-419deg) translateZ(-2040px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(142deg) rotateY(-93deg) rotateZ(-419deg) translateZ(-2040px);
            transform: translate(-50%, -50%) rotateX(142deg) rotateY(-93deg) rotateZ(-419deg) translateZ(-2040px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(32) {
  color: #bf2260;
  -webkit-clip-path: polygon(50% 50%, 60% 50%, 60% 100%);
          clip-path: polygon(50% 50%, 60% 50%, 60% 100%);
  -webkit-transform-origin: 61% 41%;
          transform-origin: 61% 41%;
  -webkit-animation: fly32 5000ms 1240ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly32 5000ms 1240ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly32 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(299deg) rotateY(183deg) rotateZ(-126deg) translateZ(-9px);
            transform: translate(-50%, -50%) rotateX(299deg) rotateY(183deg) rotateZ(-126deg) translateZ(-9px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(299deg) rotateY(183deg) rotateZ(-126deg) translateZ(-9px);
            transform: translate(-50%, -50%) rotateX(299deg) rotateY(183deg) rotateZ(-126deg) translateZ(-9px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly32 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(299deg) rotateY(183deg) rotateZ(-126deg) translateZ(-9px);
            transform: translate(-50%, -50%) rotateX(299deg) rotateY(183deg) rotateZ(-126deg) translateZ(-9px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(299deg) rotateY(183deg) rotateZ(-126deg) translateZ(-9px);
            transform: translate(-50%, -50%) rotateX(299deg) rotateY(183deg) rotateZ(-126deg) translateZ(-9px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(33) {
  color: #bd2263;
  -webkit-clip-path: polygon(60% 50%, 60% 100%, 70% 100%);
          clip-path: polygon(60% 50%, 60% 100%, 70% 100%);
  -webkit-transform-origin: 13% 97%;
          transform-origin: 13% 97%;
  -webkit-animation: fly33 5000ms 1280ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly33 5000ms 1280ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly33 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(235deg) rotateY(172deg) rotateZ(343deg) translateZ(454px);
            transform: translate(-50%, -50%) rotateX(235deg) rotateY(172deg) rotateZ(343deg) translateZ(454px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(235deg) rotateY(172deg) rotateZ(343deg) translateZ(454px);
            transform: translate(-50%, -50%) rotateX(235deg) rotateY(172deg) rotateZ(343deg) translateZ(454px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly33 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(235deg) rotateY(172deg) rotateZ(343deg) translateZ(454px);
            transform: translate(-50%, -50%) rotateX(235deg) rotateY(172deg) rotateZ(343deg) translateZ(454px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(235deg) rotateY(172deg) rotateZ(343deg) translateZ(454px);
            transform: translate(-50%, -50%) rotateX(235deg) rotateY(172deg) rotateZ(343deg) translateZ(454px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(34) {
  color: #bb2166;
  -webkit-clip-path: polygon(60% 50%, 70% 50%, 70% 100%);
          clip-path: polygon(60% 50%, 70% 50%, 70% 100%);
  -webkit-transform-origin: 83% 82%;
          transform-origin: 83% 82%;
  -webkit-animation: fly34 5000ms 1320ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly34 5000ms 1320ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly34 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-314deg) rotateY(9deg) rotateZ(488deg) translateZ(-1831px);
            transform: translate(-50%, -50%) rotateX(-314deg) rotateY(9deg) rotateZ(488deg) translateZ(-1831px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-314deg) rotateY(9deg) rotateZ(488deg) translateZ(-1831px);
            transform: translate(-50%, -50%) rotateX(-314deg) rotateY(9deg) rotateZ(488deg) translateZ(-1831px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly34 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-314deg) rotateY(9deg) rotateZ(488deg) translateZ(-1831px);
            transform: translate(-50%, -50%) rotateX(-314deg) rotateY(9deg) rotateZ(488deg) translateZ(-1831px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-314deg) rotateY(9deg) rotateZ(488deg) translateZ(-1831px);
            transform: translate(-50%, -50%) rotateX(-314deg) rotateY(9deg) rotateZ(488deg) translateZ(-1831px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(35) {
  color: #b92169;
  -webkit-clip-path: polygon(70% 50%, 70% 100%, 80% 100%);
          clip-path: polygon(70% 50%, 70% 100%, 80% 100%);
  -webkit-transform-origin: 30% 28%;
          transform-origin: 30% 28%;
  -webkit-animation: fly35 5000ms 1360ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly35 5000ms 1360ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly35 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(392deg) rotateY(346deg) rotateZ(-334deg) translateZ(-18px);
            transform: translate(-50%, -50%) rotateX(392deg) rotateY(346deg) rotateZ(-334deg) translateZ(-18px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(392deg) rotateY(346deg) rotateZ(-334deg) translateZ(-18px);
            transform: translate(-50%, -50%) rotateX(392deg) rotateY(346deg) rotateZ(-334deg) translateZ(-18px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly35 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(392deg) rotateY(346deg) rotateZ(-334deg) translateZ(-18px);
            transform: translate(-50%, -50%) rotateX(392deg) rotateY(346deg) rotateZ(-334deg) translateZ(-18px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(392deg) rotateY(346deg) rotateZ(-334deg) translateZ(-18px);
            transform: translate(-50%, -50%) rotateX(392deg) rotateY(346deg) rotateZ(-334deg) translateZ(-18px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(36) {
  color: #b7206c;
  -webkit-clip-path: polygon(70% 50%, 80% 50%, 80% 100%);
          clip-path: polygon(70% 50%, 80% 50%, 80% 100%);
  -webkit-transform-origin: 23% 69%;
          transform-origin: 23% 69%;
  -webkit-animation: fly36 5000ms 1400ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly36 5000ms 1400ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly36 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(484deg) rotateY(68deg) rotateZ(403deg) translateZ(-802px);
            transform: translate(-50%, -50%) rotateX(484deg) rotateY(68deg) rotateZ(403deg) translateZ(-802px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(484deg) rotateY(68deg) rotateZ(403deg) translateZ(-802px);
            transform: translate(-50%, -50%) rotateX(484deg) rotateY(68deg) rotateZ(403deg) translateZ(-802px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly36 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(484deg) rotateY(68deg) rotateZ(403deg) translateZ(-802px);
            transform: translate(-50%, -50%) rotateX(484deg) rotateY(68deg) rotateZ(403deg) translateZ(-802px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(484deg) rotateY(68deg) rotateZ(403deg) translateZ(-802px);
            transform: translate(-50%, -50%) rotateX(484deg) rotateY(68deg) rotateZ(403deg) translateZ(-802px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(37) {
  color: #b5206f;
  -webkit-clip-path: polygon(80% 50%, 80% 100%, 90% 100%);
          clip-path: polygon(80% 50%, 80% 100%, 90% 100%);
  -webkit-transform-origin: 63% 26%;
          transform-origin: 63% 26%;
  -webkit-animation: fly37 5000ms 1440ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly37 5000ms 1440ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly37 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-402deg) rotateY(-479deg) rotateZ(-370deg) translateZ(-1587px);
            transform: translate(-50%, -50%) rotateX(-402deg) rotateY(-479deg) rotateZ(-370deg) translateZ(-1587px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-402deg) rotateY(-479deg) rotateZ(-370deg) translateZ(-1587px);
            transform: translate(-50%, -50%) rotateX(-402deg) rotateY(-479deg) rotateZ(-370deg) translateZ(-1587px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly37 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-402deg) rotateY(-479deg) rotateZ(-370deg) translateZ(-1587px);
            transform: translate(-50%, -50%) rotateX(-402deg) rotateY(-479deg) rotateZ(-370deg) translateZ(-1587px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-402deg) rotateY(-479deg) rotateZ(-370deg) translateZ(-1587px);
            transform: translate(-50%, -50%) rotateX(-402deg) rotateY(-479deg) rotateZ(-370deg) translateZ(-1587px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(38) {
  color: #b31f72;
  -webkit-clip-path: polygon(80% 50%, 90% 50%, 90% 100%);
          clip-path: polygon(80% 50%, 90% 50%, 90% 100%);
  -webkit-transform-origin: 54% 75%;
          transform-origin: 54% 75%;
  -webkit-animation: fly38 5000ms 1480ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly38 5000ms 1480ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly38 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-395deg) rotateY(262deg) rotateZ(77deg) translateZ(-1484px);
            transform: translate(-50%, -50%) rotateX(-395deg) rotateY(262deg) rotateZ(77deg) translateZ(-1484px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-395deg) rotateY(262deg) rotateZ(77deg) translateZ(-1484px);
            transform: translate(-50%, -50%) rotateX(-395deg) rotateY(262deg) rotateZ(77deg) translateZ(-1484px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly38 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-395deg) rotateY(262deg) rotateZ(77deg) translateZ(-1484px);
            transform: translate(-50%, -50%) rotateX(-395deg) rotateY(262deg) rotateZ(77deg) translateZ(-1484px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-395deg) rotateY(262deg) rotateZ(77deg) translateZ(-1484px);
            transform: translate(-50%, -50%) rotateX(-395deg) rotateY(262deg) rotateZ(77deg) translateZ(-1484px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(39) {
  color: #b11f75;
  -webkit-clip-path: polygon(90% 50%, 90% 100%, 100% 100%);
          clip-path: polygon(90% 50%, 90% 100%, 100% 100%);
  -webkit-transform-origin: 99% 65%;
          transform-origin: 99% 65%;
  -webkit-animation: fly39 5000ms 1520ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly39 5000ms 1520ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly39 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(249deg) rotateY(-60deg) rotateZ(-100deg) translateZ(307px);
            transform: translate(-50%, -50%) rotateX(249deg) rotateY(-60deg) rotateZ(-100deg) translateZ(307px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(249deg) rotateY(-60deg) rotateZ(-100deg) translateZ(307px);
            transform: translate(-50%, -50%) rotateX(249deg) rotateY(-60deg) rotateZ(-100deg) translateZ(307px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly39 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(249deg) rotateY(-60deg) rotateZ(-100deg) translateZ(307px);
            transform: translate(-50%, -50%) rotateX(249deg) rotateY(-60deg) rotateZ(-100deg) translateZ(307px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(249deg) rotateY(-60deg) rotateZ(-100deg) translateZ(307px);
            transform: translate(-50%, -50%) rotateX(249deg) rotateY(-60deg) rotateZ(-100deg) translateZ(307px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(40) {
  color: #af1e78;
  -webkit-clip-path: polygon(90% 50%, 100% 50%, 100% 100%);
          clip-path: polygon(90% 50%, 100% 50%, 100% 100%);
  -webkit-transform-origin: 47% 72%;
          transform-origin: 47% 72%;
  -webkit-animation: fly40 5000ms 1560ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly40 5000ms 1560ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly40 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(311deg) rotateY(-218deg) rotateZ(97deg) translateZ(127px);
            transform: translate(-50%, -50%) rotateX(311deg) rotateY(-218deg) rotateZ(97deg) translateZ(127px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(311deg) rotateY(-218deg) rotateZ(97deg) translateZ(127px);
            transform: translate(-50%, -50%) rotateX(311deg) rotateY(-218deg) rotateZ(97deg) translateZ(127px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly40 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(311deg) rotateY(-218deg) rotateZ(97deg) translateZ(127px);
            transform: translate(-50%, -50%) rotateX(311deg) rotateY(-218deg) rotateZ(97deg) translateZ(127px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(311deg) rotateY(-218deg) rotateZ(97deg) translateZ(127px);
            transform: translate(-50%, -50%) rotateX(311deg) rotateY(-218deg) rotateZ(97deg) translateZ(127px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(41) {
  color: #ad1e7b;
  -webkit-clip-path: polygon(0% 100%, 0% 150%, 10% 150%);
          clip-path: polygon(0% 100%, 0% 150%, 10% 150%);
  -webkit-transform-origin: 15% 73%;
          transform-origin: 15% 73%;
  -webkit-animation: fly41 5000ms 1600ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly41 5000ms 1600ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly41 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-147deg) rotateY(-484deg) rotateZ(-197deg) translateZ(259px);
            transform: translate(-50%, -50%) rotateX(-147deg) rotateY(-484deg) rotateZ(-197deg) translateZ(259px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-147deg) rotateY(-484deg) rotateZ(-197deg) translateZ(259px);
            transform: translate(-50%, -50%) rotateX(-147deg) rotateY(-484deg) rotateZ(-197deg) translateZ(259px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly41 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-147deg) rotateY(-484deg) rotateZ(-197deg) translateZ(259px);
            transform: translate(-50%, -50%) rotateX(-147deg) rotateY(-484deg) rotateZ(-197deg) translateZ(259px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-147deg) rotateY(-484deg) rotateZ(-197deg) translateZ(259px);
            transform: translate(-50%, -50%) rotateX(-147deg) rotateY(-484deg) rotateZ(-197deg) translateZ(259px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(42) {
  color: #ab1d7e;
  -webkit-clip-path: polygon(0% 100%, 10% 100%, 10% 150%);
          clip-path: polygon(0% 100%, 10% 100%, 10% 150%);
  -webkit-transform-origin: 16% 52%;
          transform-origin: 16% 52%;
  -webkit-animation: fly42 5000ms 1640ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly42 5000ms 1640ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly42 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(407deg) rotateY(-442deg) rotateZ(24deg) translateZ(-1671px);
            transform: translate(-50%, -50%) rotateX(407deg) rotateY(-442deg) rotateZ(24deg) translateZ(-1671px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(407deg) rotateY(-442deg) rotateZ(24deg) translateZ(-1671px);
            transform: translate(-50%, -50%) rotateX(407deg) rotateY(-442deg) rotateZ(24deg) translateZ(-1671px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly42 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(407deg) rotateY(-442deg) rotateZ(24deg) translateZ(-1671px);
            transform: translate(-50%, -50%) rotateX(407deg) rotateY(-442deg) rotateZ(24deg) translateZ(-1671px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(407deg) rotateY(-442deg) rotateZ(24deg) translateZ(-1671px);
            transform: translate(-50%, -50%) rotateX(407deg) rotateY(-442deg) rotateZ(24deg) translateZ(-1671px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(43) {
  color: #a91d81;
  -webkit-clip-path: polygon(10% 100%, 10% 150%, 20% 150%);
          clip-path: polygon(10% 100%, 10% 150%, 20% 150%);
  -webkit-transform-origin: 8% 119%;
          transform-origin: 8% 119%;
  -webkit-animation: fly43 5000ms 1680ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly43 5000ms 1680ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly43 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-114deg) rotateY(41deg) rotateZ(-447deg) translateZ(-874px);
            transform: translate(-50%, -50%) rotateX(-114deg) rotateY(41deg) rotateZ(-447deg) translateZ(-874px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-114deg) rotateY(41deg) rotateZ(-447deg) translateZ(-874px);
            transform: translate(-50%, -50%) rotateX(-114deg) rotateY(41deg) rotateZ(-447deg) translateZ(-874px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly43 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-114deg) rotateY(41deg) rotateZ(-447deg) translateZ(-874px);
            transform: translate(-50%, -50%) rotateX(-114deg) rotateY(41deg) rotateZ(-447deg) translateZ(-874px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-114deg) rotateY(41deg) rotateZ(-447deg) translateZ(-874px);
            transform: translate(-50%, -50%) rotateX(-114deg) rotateY(41deg) rotateZ(-447deg) translateZ(-874px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(44) {
  color: #a71c84;
  -webkit-clip-path: polygon(10% 100%, 20% 100%, 20% 150%);
          clip-path: polygon(10% 100%, 20% 100%, 20% 150%);
  -webkit-transform-origin: 32% 83%;
          transform-origin: 32% 83%;
  -webkit-animation: fly44 5000ms 1720ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly44 5000ms 1720ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly44 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(273deg) rotateY(341deg) rotateZ(-461deg) translateZ(-1040px);
            transform: translate(-50%, -50%) rotateX(273deg) rotateY(341deg) rotateZ(-461deg) translateZ(-1040px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(273deg) rotateY(341deg) rotateZ(-461deg) translateZ(-1040px);
            transform: translate(-50%, -50%) rotateX(273deg) rotateY(341deg) rotateZ(-461deg) translateZ(-1040px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly44 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(273deg) rotateY(341deg) rotateZ(-461deg) translateZ(-1040px);
            transform: translate(-50%, -50%) rotateX(273deg) rotateY(341deg) rotateZ(-461deg) translateZ(-1040px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(273deg) rotateY(341deg) rotateZ(-461deg) translateZ(-1040px);
            transform: translate(-50%, -50%) rotateX(273deg) rotateY(341deg) rotateZ(-461deg) translateZ(-1040px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(45) {
  color: #a51c87;
  -webkit-clip-path: polygon(20% 100%, 20% 150%, 30% 150%);
          clip-path: polygon(20% 100%, 20% 150%, 30% 150%);
  -webkit-transform-origin: 5% 77%;
          transform-origin: 5% 77%;
  -webkit-animation: fly45 5000ms 1760ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly45 5000ms 1760ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly45 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(427deg) rotateY(-417deg) rotateZ(-91deg) translateZ(-640px);
            transform: translate(-50%, -50%) rotateX(427deg) rotateY(-417deg) rotateZ(-91deg) translateZ(-640px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(427deg) rotateY(-417deg) rotateZ(-91deg) translateZ(-640px);
            transform: translate(-50%, -50%) rotateX(427deg) rotateY(-417deg) rotateZ(-91deg) translateZ(-640px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly45 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(427deg) rotateY(-417deg) rotateZ(-91deg) translateZ(-640px);
            transform: translate(-50%, -50%) rotateX(427deg) rotateY(-417deg) rotateZ(-91deg) translateZ(-640px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(427deg) rotateY(-417deg) rotateZ(-91deg) translateZ(-640px);
            transform: translate(-50%, -50%) rotateX(427deg) rotateY(-417deg) rotateZ(-91deg) translateZ(-640px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(46) {
  color: #a31b8a;
  -webkit-clip-path: polygon(20% 100%, 30% 100%, 30% 150%);
          clip-path: polygon(20% 100%, 30% 100%, 30% 150%);
  -webkit-transform-origin: 45% 63%;
          transform-origin: 45% 63%;
  -webkit-animation: fly46 5000ms 1800ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly46 5000ms 1800ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly46 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-498deg) rotateY(-447deg) rotateZ(-461deg) translateZ(-59px);
            transform: translate(-50%, -50%) rotateX(-498deg) rotateY(-447deg) rotateZ(-461deg) translateZ(-59px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-498deg) rotateY(-447deg) rotateZ(-461deg) translateZ(-59px);
            transform: translate(-50%, -50%) rotateX(-498deg) rotateY(-447deg) rotateZ(-461deg) translateZ(-59px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly46 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-498deg) rotateY(-447deg) rotateZ(-461deg) translateZ(-59px);
            transform: translate(-50%, -50%) rotateX(-498deg) rotateY(-447deg) rotateZ(-461deg) translateZ(-59px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-498deg) rotateY(-447deg) rotateZ(-461deg) translateZ(-59px);
            transform: translate(-50%, -50%) rotateX(-498deg) rotateY(-447deg) rotateZ(-461deg) translateZ(-59px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(47) {
  color: #a11b8d;
  -webkit-clip-path: polygon(30% 100%, 30% 150%, 40% 150%);
          clip-path: polygon(30% 100%, 30% 150%, 40% 150%);
  -webkit-transform-origin: 8% 107%;
          transform-origin: 8% 107%;
  -webkit-animation: fly47 5000ms 1840ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly47 5000ms 1840ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly47 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-354deg) rotateY(452deg) rotateZ(466deg) translateZ(-1025px);
            transform: translate(-50%, -50%) rotateX(-354deg) rotateY(452deg) rotateZ(466deg) translateZ(-1025px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-354deg) rotateY(452deg) rotateZ(466deg) translateZ(-1025px);
            transform: translate(-50%, -50%) rotateX(-354deg) rotateY(452deg) rotateZ(466deg) translateZ(-1025px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly47 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-354deg) rotateY(452deg) rotateZ(466deg) translateZ(-1025px);
            transform: translate(-50%, -50%) rotateX(-354deg) rotateY(452deg) rotateZ(466deg) translateZ(-1025px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-354deg) rotateY(452deg) rotateZ(466deg) translateZ(-1025px);
            transform: translate(-50%, -50%) rotateX(-354deg) rotateY(452deg) rotateZ(466deg) translateZ(-1025px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(48) {
  color: #9f1a90;
  -webkit-clip-path: polygon(30% 100%, 40% 100%, 40% 150%);
          clip-path: polygon(30% 100%, 40% 100%, 40% 150%);
  -webkit-transform-origin: -4% 80%;
          transform-origin: -4% 80%;
  -webkit-animation: fly48 5000ms 1880ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly48 5000ms 1880ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly48 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(288deg) rotateY(-281deg) rotateZ(-87deg) translateZ(-532px);
            transform: translate(-50%, -50%) rotateX(288deg) rotateY(-281deg) rotateZ(-87deg) translateZ(-532px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(288deg) rotateY(-281deg) rotateZ(-87deg) translateZ(-532px);
            transform: translate(-50%, -50%) rotateX(288deg) rotateY(-281deg) rotateZ(-87deg) translateZ(-532px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly48 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(288deg) rotateY(-281deg) rotateZ(-87deg) translateZ(-532px);
            transform: translate(-50%, -50%) rotateX(288deg) rotateY(-281deg) rotateZ(-87deg) translateZ(-532px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(288deg) rotateY(-281deg) rotateZ(-87deg) translateZ(-532px);
            transform: translate(-50%, -50%) rotateX(288deg) rotateY(-281deg) rotateZ(-87deg) translateZ(-532px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(49) {
  color: #9d1a93;
  -webkit-clip-path: polygon(40% 100%, 40% 150%, 50% 150%);
          clip-path: polygon(40% 100%, 40% 150%, 50% 150%);
  -webkit-transform-origin: 59% 138%;
          transform-origin: 59% 138%;
  -webkit-animation: fly49 5000ms 1920ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly49 5000ms 1920ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly49 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(473deg) rotateY(269deg) rotateZ(235deg) translateZ(-665px);
            transform: translate(-50%, -50%) rotateX(473deg) rotateY(269deg) rotateZ(235deg) translateZ(-665px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(473deg) rotateY(269deg) rotateZ(235deg) translateZ(-665px);
            transform: translate(-50%, -50%) rotateX(473deg) rotateY(269deg) rotateZ(235deg) translateZ(-665px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly49 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(473deg) rotateY(269deg) rotateZ(235deg) translateZ(-665px);
            transform: translate(-50%, -50%) rotateX(473deg) rotateY(269deg) rotateZ(235deg) translateZ(-665px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(473deg) rotateY(269deg) rotateZ(235deg) translateZ(-665px);
            transform: translate(-50%, -50%) rotateX(473deg) rotateY(269deg) rotateZ(235deg) translateZ(-665px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(50) {
  color: #9b1996;
  -webkit-clip-path: polygon(40% 100%, 50% 100%, 50% 150%);
          clip-path: polygon(40% 100%, 50% 100%, 50% 150%);
  -webkit-transform-origin: 54% 64%;
          transform-origin: 54% 64%;
  -webkit-animation: fly50 5000ms 1960ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly50 5000ms 1960ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly50 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(165deg) rotateY(-137deg) rotateZ(160deg) translateZ(-1530px);
            transform: translate(-50%, -50%) rotateX(165deg) rotateY(-137deg) rotateZ(160deg) translateZ(-1530px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(165deg) rotateY(-137deg) rotateZ(160deg) translateZ(-1530px);
            transform: translate(-50%, -50%) rotateX(165deg) rotateY(-137deg) rotateZ(160deg) translateZ(-1530px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly50 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(165deg) rotateY(-137deg) rotateZ(160deg) translateZ(-1530px);
            transform: translate(-50%, -50%) rotateX(165deg) rotateY(-137deg) rotateZ(160deg) translateZ(-1530px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(165deg) rotateY(-137deg) rotateZ(160deg) translateZ(-1530px);
            transform: translate(-50%, -50%) rotateX(165deg) rotateY(-137deg) rotateZ(160deg) translateZ(-1530px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(51) {
  color: #991999;
  -webkit-clip-path: polygon(50% 100%, 50% 150%, 60% 150%);
          clip-path: polygon(50% 100%, 50% 150%, 60% 150%);
  -webkit-transform-origin: 52% 69%;
          transform-origin: 52% 69%;
  -webkit-animation: fly51 5000ms 2000ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: fly51 5000ms 2000ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly51 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(242deg) rotateY(-328deg) rotateZ(393deg) translateZ(334px);
            transform: translate(-50%, -50%) rotateX(242deg) rotateY(-328deg) rotateZ(393deg) translateZ(334px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(242deg) rotateY(-328deg) rotateZ(393deg) translateZ(334px);
            transform: translate(-50%, -50%) rotateX(242deg) rotateY(-328deg) rotateZ(393deg) translateZ(334px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
@keyframes fly51 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(242deg) rotateY(-328deg) rotateZ(393deg) translateZ(334px);
            transform: translate(-50%, -50%) rotateX(242deg) rotateY(-328deg) rotateZ(393deg) translateZ(334px);
  }
  10% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(242deg) rotateY(-328deg) rotateZ(393deg) translateZ(334px);
            transform: translate(-50%, -50%) rotateX(242deg) rotateY(-328deg) rotateZ(393deg) translateZ(334px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  }
}
#ui .text:nth-child(52) {
  color: #97189c;
  -webkit-clip-path: polygon(50% 100%, 60% 100%, 60% 1.........完整代码请登录后点击上方下载按钮下载查看