Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              ​<div class="container">
  <div class="bubble-wrap">
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
</div>
</div>
            
          
!
            
              ​html, body {
  height: 100%;
}

body {
  background: black;
  min-height: 100%;
  overflow: hidden;
}

@-webkit-keyframes move {
  100% {
    -webkit-transform: translate3d(0, 0, -1000px);
    transform: translate3d(0, 0, -1000px);
  }
}

@keyframes move {
  100% {
    -webkit-transform: translate3d(0, 0, -1000px);
    transform: translate3d(0, 0, -1000px);
  }
}
.container {
  position: relative;
  width: 100%;
  min-height: 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.bubble-wrap {
  margin: 100px auto;
  width: 500px;
  height: 500px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
  -webkit-perspective: 600px;
  perspective: 600px;
}

.bubble {
  position: absolute;
  background: black;
  opacity: .7;
  border-radius: 50%;
  -webkit-animation: move 3s infinite;
  animation: move 3s infinite;
}

.bubble:nth-child(1) {
  height: 9px;
  width: 9px;
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
  -webkit-transform: translate3d(59px, 247px, 1842px);
  transform: translate3d(59px, 247px, 1842px);
  background: #4640bf;
}

.bubble:nth-child(2) {
  height: 28px;
  width: 28px;
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
  -webkit-transform: translate3d(821px, 400px, 622px);
  transform: translate3d(821px, 400px, 622px);
  background: #bf40ae;
}

.bubble:nth-child(3) {
  height: 14px;
  width: 14px;
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
  -webkit-transform: translate3d(924px, 505px, 494px);
  transform: translate3d(924px, 505px, 494px);
  background: #a2bf40;
}

.bubble:nth-child(4) {
  height: 2px;
  width: 2px;
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
  -webkit-transform: translate3d(791px, 931px, 389px);
  transform: translate3d(791px, 931px, 389px);
  background: #5340bf;
}

.bubble:nth-child(5) {
  height: 20px;
  width: 20px;
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
  -webkit-transform: translate3d(806px, 463px, 1252px);
  transform: translate3d(806px, 463px, 1252px);
  background: #6abf40;
}

.bubble:nth-child(6) {
  height: 17px;
  width: 17px;
  -webkit-animation-delay: -1.2s;
  animation-delay: -1.2s;
  -webkit-transform: translate3d(751px, 363px, 1550px);
  transform: translate3d(751px, 363px, 1550px);
  background: #bf6240;
}

.bubble:nth-child(7) {
  height: 15px;
  width: 15px;
  -webkit-animation-delay: -1.4s;
  animation-delay: -1.4s;
  -webkit-transform: translate3d(98px, 330px, 707px);
  transform: translate3d(98px, 330px, 707px);
  background: #6fbf40;
}

.bubble:nth-child(8) {
  height: 23px;
  width: 23px;
  -webkit-animation-delay: -1.6s;
  animation-delay: -1.6s;
  -webkit-transform: translate3d(81px, 764px, 753px);
  transform: translate3d(81px, 764px, 753px);
  background: #9dbf40;
}

.bubble:nth-child(9) {
  height: 6px;
  width: 6px;
  -webkit-animation-delay: -1.8s;
  animation-delay: -1.8s;
  -webkit-transform: translate3d(891px, 946px, 1972px);
  transform: translate3d(891px, 946px, 1972px);
  background: #bf40b7;
}

.bubble:nth-child(10) {
  height: 20px;
  width: 20px;
  -webkit-animation-delay: -2s;
  animation-delay: -2s;
  -webkit-transform: translate3d(92px, 652px, 1730px);
  transform: translate3d(92px, 652px, 1730px);
  background: #5b40bf;
}

.bubble:nth-child(11) {
  height: 23px;
  width: 23px;
  -webkit-animation-delay: -2.2s;
  animation-delay: -2.2s;
  -webkit-transform: translate3d(210px, 369px, 1329px);
  transform: translate3d(210px, 369px, 1329px);
  background: #aabf40;
}

.bubble:nth-child(12) {
  height: 17px;
  width: 17px;
  -webkit-animation-delay: -2.4s;
  animation-delay: -2.4s;
  -webkit-transform: translate3d(20px, 342px, 409px);
  transform: translate3d(20px, 342px, 409px);
  background: #77bf40;
}

.bubble:nth-child(13) {
  height: 6px;
  width: 6px;
  -webkit-animation-delay: -2.6s;
  animation-delay: -2.6s;
  -webkit-transform: translate3d(80px, 746px, 166px);
  transform: translate3d(80px, 746px, 166px);
  background: #7b40bf;
}

.bubble:nth-child(14) {
  height: 1px;
  width: 1px;
  -webkit-animation-delay: -2.8s;
  animation-delay: -2.8s;
  -webkit-transform: translate3d(316px, 912px, 851px);
  transform: translate3d(316px, 912px, 851px);
  background: #409fbf;
}

.bubble:nth-child(15) {
  height: 0px;
  width: 0px;
  -webkit-animation-delay: -3s;
  animation-delay: -3s;
  -webkit-transform: translate3d(349px, 927px, 294px);
  transform: translate3d(349px, 927px, 294px);
  background: #40bf68;
}

.bubble:nth-child(16) {
  height: 21px;
  width: 21px;
  -webkit-animation-delay: -3.2s;
  animation-delay: -3.2s;
  -webkit-transform: translate3d(742px, 931px, 1496px);
  transform: translate3d(742px, 931px, 1496px);
  background: #4073bf;
}

.bubble:nth-child(17) {
  height: 8px;
  width: 8px;
  -webkit-animation-delay: -3.4s;
  animation-delay: -3.4s;
  -webkit-transform: translate3d(401px, 923px, 1244px);
  transform: translate3d(401px, 923px, 1244px);
  background: #aabf40;
}

.bubble:nth-child(18) {
  height: 4px;
  width: 4px;
  -webkit-animation-delay: -3.6s;
  animation-delay: -3.6s;
  -webkit-transform: translate3d(54px, 326px, 1230px);
  transform: translate3d(54px, 326px, 1230px);
  background: #9940bf;
}

.bubble:nth-child(19) {
  height: 24px;
  width: 24px;
  -webkit-animation-delay: -3.8s;
  animation-delay: -3.8s;
  -webkit-transform: translate3d(47px, 247px, 815px);
  transform: translate3d(47px, 247px, 815px);
  background: #a240bf;
}

.bubble:nth-child(20) {
  height: 2px;
  width: 2px;
  -webkit-animation-delay: -4s;
  animation-delay: -4s;
  -webkit-transform: translate3d(16px, 406px, 78px);
  transform: translate3d(16px, 406px, 78px);
  background: #bf6040;
}

.bubble:nth-child(21) {
  height: 12px;
  width: 12px;
  -webkit-animation-delay: -4.2s;
  animation-delay: -4.2s;
  -webkit-transform: translate3d(867px, 442px, 1042px);
  transform: translate3d(867px, 442px, 1042px);
  background: #40bf91;
}

.bubble:nth-child(22) {
  height: 10px;
  width: 10px;
  -webkit-animation-delay: -4.4s;
  animation-delay: -4.4s;
  -webkit-transform: translate3d(952px, 335px, 834px);
  transform: translate3d(952px, 335px, 834px);
  background: #bf407b;
}

.bubble:nth-child(23) {
  height: 15px;
  width: 15px;
  -webkit-animation-delay: -4.6s;
  animation-delay: -4.6s;
  -webkit-transform: translate3d(917px, 596px, 563px);
  transform: translate3d(917px, 596px, 563px);
  background: #4840bf;
}

.bubble:nth-child(24) {
  height: 0px;
  width: 0px;
  -webkit-animation-delay: -4.8s;
  animation-delay: -4.8s;
  -webkit-transform: translate3d(986px, 629px, 1355px);
  transform: translate3d(986px, 629px, 1355px);
  background: #bfaa40;
}

.bubble:nth-child(25) {
  height: 24px;
  width: 24px;
  -webkit-animation-delay: -5s;
  animation-delay: -5s;
  -webkit-transform: translate3d(310px, 462px, 626px);
  transform: translate3d(310px, 462px, 626px);
  background: #bf4240;
}

.bubble:nth-child(26) {
  height: 26px;
  width: 26px;
  -webkit-animation-delay: -5.2s;
  animation-delay: -5.2s;
  -webkit-transform: translate3d(293px, 473px, 341px);
  transform: translate3d(293px, 473px, 341px);
  background: #40bdbf;
}

.bubble:nth-child(27) {
  height: 4px;
  width: 4px;
  -webkit-animation-delay: -5.4s;
  animation-delay: -5.4s;
  -webkit-transform: translate3d(9px, 7px, 1575px);
  transform: translate3d(9px, 7px, 1575px);
  background: #7940bf;
}

.bubble:nth-child(28) {
  height: 26px;
  width: 26px;
  -webkit-animation-delay: -5.6s;
  animation-delay: -5.6s;
  -webkit-transform: translate3d(223px, 702px, 1145px);
  transform: translate3d(223px, 702px, 1145px);
  background: #4440bf;
}

.bubble:nth-child(29) {
  height: 7px;
  width: 7px;
  -webkit-animation-delay: -5.8s;
  animation-delay: -5.8s;
  -webkit-transform: translate3d(306px, 90px, 1796px);
  transform: translate3d(306px, 90px, 1796px);
  background: #40bf4d;
}

.bubble:nth-child(30) {
  height: 3px;
  width: 3px;
  -webkit-animation-delay: -6s;
  animation-delay: -6s;
  -webkit-transform: translate3d(640px, 136px, 1089px);
  transform: translate3d(640px, 136px, 1089px);
  background: #ac40bf;
}

.bubble:nth-child(31) {
  height: 20px;
  width: 20px;
  -webkit-animation-delay: -6.2s;
  animation-delay: -6.2s;
  -webkit-transform: translate3d(557px, 563px, 693px);
  transform: translate3d(557px, 563px, 693px);
  background: #bf4240;
}

.bubble:nth-child(32) {
  height: 7px;
  width: 7px;
  -webkit-animation-delay: -6.4s;
  animation-delay: -6.4s;
  -webkit-transform: translate3d(47px, 972px, 1693px);
  transform: translate3d(47px, 972px, 1693px);
  background: #bf4079;
}

.bubble:nth-child(33) {
  height: 15px;
  width: 15px;
  -webkit-animation-delay: -6.6s;
  animation-delay: -6.6s;
  -webkit-transform: translate3d(218px, 269px, 1525px);
  transform: translate3d(218px, 269px, 1525px);
  background: #55bf40;
}

.bubble:nth-child(34) {
  height: 28px;
  width: 28px;
  -webkit-animation-delay: -6.8s;
  animation-delay: -6.8s;
  -webkit-transform: translate3d(583px, 990px, 833px);
  transform: translate3d(583px, 990px, 833px);
  background: #bf5540;
}

.bubble:nth-child(35) {
  height: 24px;
  width: 24px;
  -webkit-animation-delay: -7s;
  animation-delay: -7s;
  -webkit-transform: translate3d(590px, 246px, 1405px);
  transform: translate3d(590px, 246px, 1405px);
  background: #409bbf;
}

.bubble:nth-child(36) {
  height: 25px;
  width: 25px;
  -webkit-animation-delay: -7.2s;
  animation-delay: -7.2s;
  -webkit-transform: translate3d(671px, 898px, 1905px);
  transform: translate3d(671px, 898px, 1905px);
  background: #40bf79;
}

.bubble:nth-child(37) {
  height: 0px;
  width: 0px;
  -webkit-animation-delay: -7.4s;
  animation-delay: -7.4s;
  -webkit-transform: translate3d(374px, 254px, 91px);
  transform: translate3d(374px, 254px, 91px);
  background: #40bfbf;
}

.bubble:nth-child(38) {
  height: 11px;
  width: 11px;
  -webkit-animation-delay: -7.6s;
  animation-delay: -7.6s;
  -webkit-transform: translate3d(822px, 399px, 1554px);
  transform: translate3d(822px, 399px, 1554px);
  background: #4c40bf;
}

.bubble:nth-child(39) {
  height: 9px;
  width: 9px;
  -webkit-animation-delay: -7.8s;
  animation-delay: -7.8s;
  -webkit-transform: translate3d(919px, 865px, 1071px);
  transform: translate3d(919px, 865px, 1071px);
  background: #bfa240;
}

.bubble:nth-child(40) {
  height: 18px;
  width: 18px;
  -webkit-animation-delay: -8s;
  animation-delay: -8s;
  -webkit-transform: translate3d(809px, 898px, 987px);
  transform: translate3d(809px, 898px, 987px);
  background: #6840bf;
}

.bubble:nth-child(41) {
  height: 11px;
  width: 11px;
  -webkit-animation-delay: -8.2s;
  animation-delay: -8.2s;
  -webkit-transform: translate3d(225px, 756px, 1814px);
  transform: translate3d(225px, 756px, 1814px);
  background: #64bf40;
}

.bubble:nth-child(42) {
  height: 13px;
  width: 13px;
  -webkit-animation-delay: -8.4s;
  animation-delay: -8.4s;
  -webkit-transform: translate3d(884px, 392px, 931px);
  transform: translate3d(884px, 392px, 931px);
  background: #bf4071;
}

.bubble:nth-child(43) {
  height: 1px;
  width: 1px;
  -webkit-animation-delay: -8.6s;
  animation-delay: -8.6s;
  -webkit-transform: translate3d(69px, 6px, 161px);
  transform: translate3d(69px, 6px, 161px);
  background: #b940bf;
}

.bubble:nth-child(44) {
  height: 24px;
  width: 24px;
  -webkit-animation-delay: -8.8s;
  animation-delay: -8.8s;
  -webkit-transform: translate3d(869px, 712px, 1074px);
  transform: translate3d(869px, 712px, 1074px);
  background: #bf4062;
}

.bubble:nth-child(45) {
  height: 18px;
  width: 18px;
  -webkit-animation-delay: -9s;
  animation-delay: -9s;
  -webkit-transform: translate3d(969px, 709px, 886px);
  transform: translate3d(969px, 709px, 886px);
  background: #8a40bf;
}

.bubble:nth-child(46) {
  height: 10px;
  width: 10px;
  -webkit-animation-delay: -9.2s;
  animation-delay: -9.2s;
  -webkit-transform: translate3d(443px, 44px, 56px);
  transform: translate3d(443px, 44px, 56px);
  background: #93bf40;
}

.bubble:nth-child(47) {
  height: 25px;
  width: 25px;
  -webkit-animation-delay: -9.4s;
  animation-delay: -9.4s;
  -webkit-transform: translate3d(308px, 339px, 1393px);
  transform: translate3d(308px, 339px, 1393px);
  background: #4073bf;
}

.bubble:nth-child(48) {
  height: 8px;
  width: 8px;
  -webkit-animation-delay: -9.6s;
  animation-delay: -9.6s;
  -webkit-transform: translate3d(713px, 573px, 519px);
  transform: translate3d(713px, 573px, 519px);
  background: #bfa240;
}

.bubble:nth-child(49) {
  height: 26px;
  width: 26px;
  -webkit-animation-delay: -9.8s;
  animation-delay: -9.8s;
  -webkit-transform: translate3d(728px, 798px, 765px);
  transform: translate3d(728px, 798px, 765px);
  background: #bf8640;
}

.bubble:nth-child(50) {
  height: 3px;
  width: 3px;
  -webkit-animation-delay: -10s;
  animation-delay: -10s;
  -webkit-transform: translate3d(265px, 840px, 403px);
  transform: translate3d(265px, 840px, 403px);
  background: #a440bf;
}

.bubble:nth-child(51) {
  height: 7px;
  width: 7px;
  -webkit-animation-delay: -10.2s;
  animation-delay: -10.2s;
  -webkit-transform: translate3d(299px, 834px, 1345px);
  transform: translate3d(299px, 834px, 1345px);
  background: #bf7540;
}

.bubble:nth-child(52) {
  height: 27px;
  width: 27px;
  -webkit-animation-delay: -10.4s;
  animation-delay: -10.4s;
  -webkit-transform: translate3d(758px, 443px, 438px);
  transform: translate3d(758px, 443px, 438px);
  background: #bf6840;
}

.bubble:nth-child(53) {
  height: 19px;
  width: 19px;
  -webkit-animation-delay: -10.6s;
  animation-delay: -10.6s;
  -webkit-transform: translate3d(964px, 969px, 75px);
  transform: translate3d(964px, 969px, 75px);
  background: #4fbf40;
}

.bubble:nth-child(54) {
  height: 25px;
  width: 25px;
  -webkit-animation-delay: -10.8s;
  animation-delay: -10.8s;
  -webkit-transform: translate3d(276px, 789px, 609px);
  transform: translate3d(276px, 789px, 609px);
  background: #7140bf;
}

.bubble:nth-child(55) {
  height: 2px;
  width: 2px;
  -webkit-animation-delay: -11s;
  animation-delay: -11s;
  -webkit-transform: translate3d(472px, 521px, 557px);
  transform: translate3d(472px, 521px, 557px);
  background: #4095bf;
}

.bubble:nth-child(56) {
  height: 16px;
  width: 16px;
  -webkit-animation-delay: -11.2s;
  animation-delay: -11.2s;
  -webkit-transform: translate3d(149px, 655px, 515px);
  transform: translate3d(149px, 655px, 515px);
  background: #40bfb5;
}

.bubble:nth-child(57) {
  height: 17px;
  width: 17px;
  -webkit-animation-delay: -11.4s;
  animation-delay: -11.4s;
  -webkit-transform: translate3d(459px, 541px, 634px);
  transform: translate3d(459px, 541px, 634px);
  background: #4a40bf;
}

.bubble:nth-child(58) {
  height: 10px;
  width: 10px;
  -webkit-animation-delay: -11.6s;
  animation-delay: -11.6s;
  -webkit-transform: translate3d(111px, 191px, 811px);
  transform: translate3d(111px, 191px, 811px);
  background: #bf40bb;
}

.bubble:nth-child(59) {
  height: 12px;
  width: 12px;
  -webkit-animation-delay: -11.8s;
  animation-delay: -11.8s;
  -webkit-transform: translate3d(962px, 723px, 1003px);
  transform: translate3d(962px, 723px, 1003px);
  background: #5dbf40;
}

.bubble:nth-child(60) {
  height: 6px;
  width: 6px;
  -webkit-animation-delay: -12s;
  animation-delay: -12s;
  -webkit-transform: translate3d(605px, 340px, 465px);
  transform: translate3d(605px, 340px, 465px);
  background: #bf40ac;
}

.bubble:nth-child(61) {
  height: 14px;
  width: 14px;
  -webkit-animation-delay: -12.2s;
  animation-delay: -12.2s;
  -webkit-transform: translate3d(693px, 17px, 1636px);
  transform: translate3d(693px, 17px, 1636px);
  background: #7d40bf;
}

.bubble:nth-child(62) {
  height: 16px;
  width: 16px;
  -webkit-animation-delay: -12.4s;
  animation-delay: -12.4s;
  -webkit-transform: translate3d(475px, 93px, 938px);
  transform: translate3d(475px, 93px, 938px);
  background: #48bf40;
}

.bubble:nth-child(63) {
  height: 8px;
  width: 8px;
  -webkit-animation-delay: -12.6s;
  animation-delay: -12.6s;
  -webkit-transform: translate3d(276px, 575px, 1159px);
  transform: translate3d(276px, 575px, 1159px);
  background: #40bf9d;
}

.bubble:nth-child(64) {
  height: 6px;
  width: 6px;
  -webkit-animation-delay: -12.8s;
  animation-delay: -12.8s;
  -webkit-transform: translate3d(207px, 155px, 1459px);
  transform: translate3d(207px, 155px, 1459px);
  background: #bfbb40;
}

.bubble:nth-child(65) {
  height: 20px;
  width: 20px;
  -webkit-animation-delay: -13s;
  animation-delay: -13s;
  -webkit-transform: translate3d(640px, 882px, 765px);
  transform: translate3d(640px, 882px, 765px);
  background: #bfaa40;
}

.bubble:nth-child(66) {
  height: 28px;
  width: 28px;
  -webkit-animation-delay: -13.2s;
  animation-delay: -13.2s;
  -webkit-transform: translate3d(822px, 335px, 1002px);
  transform: translate3d(822px, 335px, 1002px);
  background: #84bf40;
}

.bubble:nth-child(67) {
  height: 22px;
  width: 22px;
  -webkit-animation-delay: -13.4s;
  animation-delay: -13.4s;
  -webkit-transform: translate3d(483px, 582px, 635px);
  transform: translate3d(483px, 582px, 635px);
  background: #bf40b0;
}

.bubble:nth-child(68) {
  height: 17px;
  width: 17px;
  -webkit-animation-delay: -13.6s;
  animation-delay: -13.6s;
  -webkit-transform: translate3d(865px, 41px, 1745px);
  transform: translate3d(865px, 41px, 1745px);
  background: #bf4a40;
}

.bubble:nth-child(69) {
  height: 0px;
  width: 0px;
  -webkit-animation-delay: -13.8s;
  animation-delay: -13.8s;
  -webkit-transform: translate3d(919px, 66px, 301px);
  transform: translate3d(919px, 66px, 301px);
  background: #5bbf40;
}

.bubble:nth-child(70) {
  height: 8px;
  width: 8px;
  -webkit-animation-delay: -14s;
  animation-delay: -14s;
  -webkit-transform: translate3d(388px, 720px, 307px);
  transform: translate3d(388px, 720px, 307px);
  background: #40b9bf;
}

.bubble:nth-child(71) {
  height: 7px;
  width: 7px;
  -webkit-animation-delay: -14.2s;
  animation-delay: -14.2s;
  -webkit-transform: translate3d(759px, 394px, 76px);
  transform: translate3d(759px, 394px, 76px);
  background: #404cbf;
}

.bubble:nth-child(72) {
  height: 28px;
  width: 28px;
  -webkit-animation-delay: -14.4s;
  animation-delay: -14.4s;
  -webkit-transform: translate3d(349px, 130px, 16px);
  transform: translate3d(349px, 130px, 16px);
  background: #bfa240;
}

.bubble:nth-child(73) {
  height: 22px;
  width: 22px;
  -webkit-animation-delay: -14.6s;
  animation-delay: -14.6s;
  -webkit-transform: translate3d(973px, 545px, 1342px);
  transform: translate3d(973px, 545px, 1342px);
  background: #40bfb7;
}

.bubble:nth-child(74) {
  height: 5px;
  width: 5px;
  -webkit-animation-delay: -14.8s;
  animation-delay: -14.8s;
  -webkit-transform: translate3d(280px, 897px, 626px);
  transform: translate3d(280px, 897px, 626px);
  background: #bf408c;
}

.bubble:nth-child(75) {
  height: 27px;
  width: 27px;
  -webkit-animation-delay: -15s;
  animation-delay: -15s;
  -webkit-transform: translate3d(348px, 569px, 1736px);
  transform: translate3d(348px, 569px, 1736px);
  background: #bf4068;
}

.bubble:nth-child(76) {
  height: 10px;
  width: 10px;
  -webkit-animation-delay: -15.2s;
  animation-delay: -15.2s;
  -webkit-transform: translate3d(945px, 334px, 982px);
  transform: translate3d(945px, 334px, 982px);
  background: #8c40bf;
}

.bubble:nth-child(77) {
  height: 9px;
  width: 9px;
  -webkit-animation-delay: -15.4s;
  animation-delay: -15.4s;
  -webkit-transform: translate3d(352px, 635px, 1973px);
  transform: translate3d(352px, 635px, 1973px);
  background: #aebf40;
}

.bubble:nth-child(78) {
  height: 14px;
  width: 14px;
  -webkit-animation-delay: -15.6s;
  animation-delay: -15.6s;
  -webkit-transform: translate3d(273px, 298px, 1712px);
  transform: translate3d(273px, 298px, 1712px);
  background: #bf40a6;
}

.bubble:nth-child(79) {
  height: 9px;
  width: 9px;
  -webkit-animation-delay: -15.8s;
  animation-delay: -15.8s;
  -webkit-transform: translate3d(841px, 923px, 1329px);
  transform: translate3d(841px, 923px, 1329px);
  background: #bf408a;
}

.bubble:nth-child(80) {
  height: 11px;
  width: 11px;
  -webkit-animation-delay: -16s;
  animation-delay: -16s;
  -webkit-transform: translate3d(370px, 176px, 18px);
  transform: translate3d(370px, 176px, 18px);
  background: #bf409b;
}

.bubble:nth-child(81) {
  height: 1px;
  width: 1px;
  -webkit-animation-delay: -16.2s;
  animation-delay: -16.2s;
  -webkit-transform: translate3d(715px, 485px, 1244px);
  transform: translate3d(715px, 485px, 1244px);
  background: #bf7d40;
}

.bubble:nth-child(82) {
  height: 25px;
  width: 25px;
  -webkit-animation-delay: -16.4s;
  animation-delay: -16.4s;
  -webkit-transform: translate3d(731px, 211px, 1761px);
  transform: translate3d(731px, 211px, 1761px);
  background: #40bf71;
}

.bubble:nth-child(83) {
  height: 19px;
  width: 19px;
  -webkit-animation-delay: -16.6s;
  animation-delay: -16.6s;
  -webkit-transform: translate3d(567px, 872px, 1051px);
  transform: translate3d(567px, 872px, 1051px);
  background: #9540bf;
}

.bubble:nth-child(84) {
  height: 13px;
  width: 13px;
  -webkit-animation-delay: -16.8s;
  animation-delay: -16.8s;
  -webkit-transform: translate3d(665px, 854px, 1461px);
  transform: translate3d(665px, 854px, 1461px);
  background: #a840bf;
}

.bubble:nth-child(85) {
  height: 12px;
  width: 12px;
  -webkit-animation-delay: -17s;
  animation-delay: -17s;
  -webkit-transform: translate3d(714px, 988px, 944px);
  transform: translate3d(714px, 988px, 944px);
  background: #bf4640;
}

.bubble:nth-child(86) {
  height: 5px;
  width: 5px;
  -webkit-animation-delay: -17.2s;
  animation-delay: -17.2s;
  -webkit-transform: translate3d(515px, 644px, 1338px);
  transform: translate3d(515px, 644px, 1338px);
  background: #9f40bf;
}

.bubble:nth-child(87) {
  height: 11px;
  width: 11px;
  -webkit-animation-delay: -17.4s;
  animation-delay: -17.4s;
  -webkit-transform: translate3d(248px, 670px, 837px);
  transform: translate3d(248px, 670px, 837px);
  background: #bf8c40;
}

.bubble:nth-child(88) {
  height: 11px;
  width: 11px;
  -webkit-animation-delay: -17.6s;
  animation-delay: -17.6s;
  -webkit-transform: translate3d(529px, 657px, 428px);
  transform: translate3d(529px, 657px, 428px);
  background: #40bf62;
}

.bubble:nth-child(89) {
  height: 29px;
  width: 29px;
  -webkit-animation-delay: -17.8s;
  animation-delay: -17.8s;
  -webkit-transform: translate3d(723px, 573px, 348px);
  transform: translate3d(723px, 573px, 348px);
  background: #4044bf;
}

.bubble:nth-child(90) {
  height: 3px;
  width: 3px;
  -webkit-animation-delay: -18s;
  animation-delay: -18s;
  -webkit-transform: translate3d(618px, 421px, 1694px);
  transform: translate3d(618px, 421px, 1694px);
  background: #40bf88;
}

.bubble:nth-child(91) {
  height: 3px;
  width: 3px;
  -webkit-animation-delay: -18.2s;
  animation-delay: -18.2s;
  -webkit-transform: translate3d(481px, 394px, 322px);
  transform: translate3d(481px, 394px, 322px);
  background: #bf404d;
}

.bubble:nth-child(92) {
  height: 20px;
  width: 20px;
  -webkit-animation-delay: -18.4s;
  animation-delay: -18.4s;
  -webkit-transform: translate3d(532px, 602px, 491px);
  transform: translate3d(532px, 602px, 491px);
  background: #bf40b3;
}

.bubble:nth-child(93) {
  height: 22px;
  width: 22px;
  -webkit-animation-delay: -18.6s;
  animation-delay: -18.6s;
  -webkit-transform: translate3d(579px, 749px, 1367px);
  transform: translate3d(579px, 749px, 1367px);
  background: #6abf40;
}

.bubble:nth-child(94) {
  height: 18px;
  width: 18px;
  -webkit-animation-delay: -18.8s;
  animation-delay: -18.8s;
  -webkit-transform: translate3d(556px, 163px, 190px);
  transform: translate3d(556px, 163px, 190px);
  background: #bf40ac;
}

.bubble:nth-child(95) {
  height: 8px;
  width: 8px;
  -webkit-animation-delay: -19s;
  animation-delay: -19s;
  -webkit-transform: translate3d(800px, 814px, 215px);
  transform: translate3d(800px, 814px, 215px);
  background: #407fbf;
}

.bubble:nth-child(96) {
  height: 23px;
  width: 23px;
  -webkit-animation-delay: -19.2s;
  animation-delay: -19.2s;
  -webkit-transform: translate3d(659px, 960px, 506px);
  transform: translate3d(659px, 960px, 506px);
  background: #bf4044;
}

.bubble:nth-child(97) {
  height: 16px;
  width: 16px;
  -webkit-animation-delay: -19.4s;
  animation-delay: -19.4s;
  -webkit-transform: translate3d(539px, 45px, 931px);
  transform: translate3d(539px, 45px, 931px);
  background: #5bbf40;
}

.bubble:nth-child(98) {
  height: 29px;
  width: 29px;
  -webkit-animation-delay: -19.6s;
  animation-delay: -19.6s;
  -webkit-transform: translate3d(64px, 672px, 838px);
  transform: translate3d(64px, 672px, 838px);
  background: #8ebf40;
}

.bubble:nth-child(99) {
  height: 24px;
  width: 24px;
  -webkit-animation-delay: -19.8s;
  animation-delay: -19.8s;
  -webkit-transform: translate3d(450px, 862px, 1580px);
  transform: translate3d(450px, 862px, 1580px);
  background: #b5bf40;
}

.bubble:nth-child(100) {
  height: 17px;
  width: 17px;
  -webkit-animation-delay: -20s;
  animation-delay: -20s;
  -webkit-transform: translate3d(460px, 39px, 1636px);
  transform: translate3d(460px, 39px, 1636px);
  background: #4088bf;
}

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console