EffectHub.com: your best source for gaming

Recommendation

More Effects...

CSS

body {
  background: #222;
  overflow-y: hidden;
}

.thing {
  border-radius: 50%;
  position: absolute;
  opacity: 0;
}
.thing:nth-of-type(1) {
  background: rgba(191, 77, 64, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
  left: -webkit-calc(50% - 4px);
  left: calc(50% - 4px);
  height: 8px;
  top: -webkit-calc(50% - 4px);
  top: calc(50% - 4px);
  width: 8px;
  -webkit-transform-origin: 2% 2%;
  -ms-transform-origin: 2% 2%;
  transform-origin: 2% 2%;
}
.thing:nth-of-type(2) {
  background: rgba(191, 89, 64, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
  left: -webkit-calc(50% - 8px);
  left: calc(50% - 8px);
  height: 16px;
  top: -webkit-calc(50% - 8px);
  top: calc(50% - 8px);
  width: 16px;
  -webkit-transform-origin: 4% 4%;
  -ms-transform-origin: 4% 4%;
  transform-origin: 4% 4%;
}
.thing:nth-of-type(3) {
  background: rgba(191, 102, 64, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
  left: -webkit-calc(50% - 12px);
  left: calc(50% - 12px);
  height: 24px;
  top: -webkit-calc(50% - 12px);
  top: calc(50% - 12px);
  width: 24px;
  -webkit-transform-origin: 6% 6%;
  -ms-transform-origin: 6% 6%;
  transform-origin: 6% 6%;
}
.thing:nth-of-type(4) {
  background: rgba(191, 115, 64, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
  left: -webkit-calc(50% - 16px);
  left: calc(50% - 16px);
  height: 32px;
  top: -webkit-calc(50% - 16px);
  top: calc(50% - 16px);
  width: 32px;
  -webkit-transform-origin: 8% 8%;
  -ms-transform-origin: 8% 8%;
  transform-origin: 8% 8%;
}
.thing:nth-of-type(5) {
  background: rgba(191, 128, 64, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
  left: -webkit-calc(50% - 20px);
  left: calc(50% - 20px);
  height: 40px;
  top: -webkit-calc(50% - 20px);
  top: calc(50% - 20px);
  width: 40px;
  -webkit-transform-origin: 10% 10%;
  -ms-transform-origin: 10% 10%;
  transform-origin: 10% 10%;
}
.thing:nth-of-type(6) {
  background: rgba(191, 140, 64, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
  left: -webkit-calc(50% - 24px);
  left: calc(50% - 24px);
  height: 48px;
  top: -webkit-calc(50% - 24px);
  top: calc(50% - 24px);
  width: 48px;
  -webkit-transform-origin: 12% 12%;
  -ms-transform-origin: 12% 12%;
  transform-origin: 12% 12%;
}
.thing:nth-of-type(7) {
  background: rgba(191, 153, 64, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s;
  left: -webkit-calc(50% - 28px);
  left: calc(50% - 28px);
  height: 56px;
  top: -webkit-calc(50% - 28px);
  top: calc(50% - 28px);
  width: 56px;
  -webkit-transform-origin: 14% 14%;
  -ms-transform-origin: 14% 14%;
  transform-origin: 14% 14%;
}
.thing:nth-of-type(8) {
  background: rgba(191, 166, 64, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
  left: -webkit-calc(50% - 32px);
  left: calc(50% - 32px);
  height: 64px;
  top: -webkit-calc(50% - 32px);
  top: calc(50% - 32px);
  width: 64px;
  -webkit-transform-origin: 16% 16%;
  -ms-transform-origin: 16% 16%;
  transform-origin: 16% 16%;
}
.thing:nth-of-type(9) {
  background: rgba(191, 179, 64, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
  left: -webkit-calc(50% - 36px);
  left: calc(50% - 36px);
  height: 72px;
  top: -webkit-calc(50% - 36px);
  top: calc(50% - 36px);
  width: 72px;
  -webkit-transform-origin: 18% 18%;
  -ms-transform-origin: 18% 18%;
  transform-origin: 18% 18%;
}
.thing:nth-of-type(10) {
  background: rgba(191, 191, 64, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  left: -webkit-calc(50% - 40px);
  left: calc(50% - 40px);
  height: 80px;
  top: -webkit-calc(50% - 40px);
  top: calc(50% - 40px);
  width: 80px;
  -webkit-transform-origin: 20% 20%;
  -ms-transform-origin: 20% 20%;
  transform-origin: 20% 20%;
}
.thing:nth-of-type(11) {
  background: rgba(179, 191, 64, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 1.1s;
  animation-delay: 1.1s;
  left: -webkit-calc(50% - 44px);
  left: calc(50% - 44px);
  height: 88px;
  top: -webkit-calc(50% - 44px);
  top: calc(50% - 44px);
  width: 88px;
  -webkit-transform-origin: 22% 22%;
  -ms-transform-origin: 22% 22%;
  transform-origin: 22% 22%;
}
.thing:nth-of-type(12) {
  background: rgba(166, 191, 64, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
  left: -webkit-calc(50% - 48px);
  left: calc(50% - 48px);
  height: 96px;
  top: -webkit-calc(50% - 48px);
  top: calc(50% - 48px);
  width: 96px;
  -webkit-transform-origin: 24% 24%;
  -ms-transform-origin: 24% 24%;
  transform-origin: 24% 24%;
}
.thing:nth-of-type(13) {
  background: rgba(153, 191, 64, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 1.3s;
  animation-delay: 1.3s;
  left: -webkit-calc(50% - 52px);
  left: calc(50% - 52px);
  height: 104px;
  top: -webkit-calc(50% - 52px);
  top: calc(50% - 52px);
  width: 104px;
  -webkit-transform-origin: 26% 26%;
  -ms-transform-origin: 26% 26%;
  transform-origin: 26% 26%;
}
.thing:nth-of-type(14) {
  background: rgba(140, 191, 64, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 1.4s;
  animation-delay: 1.4s;
  left: -webkit-calc(50% - 56px);
  left: calc(50% - 56px);
  height: 112px;
  top: -webkit-calc(50% - 56px);
  top: calc(50% - 56px);
  width: 112px;
  -webkit-transform-origin: 28% 28%;
  -ms-transform-origin: 28% 28%;
  transform-origin: 28% 28%;
}
.thing:nth-of-type(15) {
  background: rgba(128, 191, 64, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
  left: -webkit-calc(50% - 60px);
  left: calc(50% - 60px);
  height: 120px;
  top: -webkit-calc(50% - 60px);
  top: calc(50% - 60px);
  width: 120px;
  -webkit-transform-origin: 30% 30%;
  -ms-transform-origin: 30% 30%;
  transform-origin: 30% 30%;
}
.thing:nth-of-type(16) {
  background: rgba(115, 191, 64, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 1.6s;
  animation-delay: 1.6s;
  left: -webkit-calc(50% - 64px);
  left: calc(50% - 64px);
  height: 128px;
  top: -webkit-calc(50% - 64px);
  top: calc(50% - 64px);
  width: 128px;
  -webkit-transform-origin: 32% 32%;
  -ms-transform-origin: 32% 32%;
  transform-origin: 32% 32%;
}
.thing:nth-of-type(17) {
  background: rgba(102, 191, 64, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 1.7s;
  animation-delay: 1.7s;
  left: -webkit-calc(50% - 68px);
  left: calc(50% - 68px);
  height: 136px;
  top: -webkit-calc(50% - 68px);
  top: calc(50% - 68px);
  width: 136px;
  -webkit-transform-origin: 34% 34%;
  -ms-transform-origin: 34% 34%;
  transform-origin: 34% 34%;
}
.thing:nth-of-type(18) {
  background: rgba(89, 191, 64, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 1.8s;
  animation-delay: 1.8s;
  left: -webkit-calc(50% - 72px);
  left: calc(50% - 72px);
  height: 144px;
  top: -webkit-calc(50% - 72px);
  top: calc(50% - 72px);
  width: 144px;
  -webkit-transform-origin: 36% 36%;
  -ms-transform-origin: 36% 36%;
  transform-origin: 36% 36%;
}
.thing:nth-of-type(19) {
  background: rgba(77, 191, 64, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 1.9s;
  animation-delay: 1.9s;
  left: -webkit-calc(50% - 76px);
  left: calc(50% - 76px);
  height: 152px;
  top: -webkit-calc(50% - 76px);
  top: calc(50% - 76px);
  width: 152px;
  -webkit-transform-origin: 38% 38%;
  -ms-transform-origin: 38% 38%;
  transform-origin: 38% 38%;
}
.thing:nth-of-type(20) {
  background: rgba(64, 191, 64, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  left: -webkit-calc(50% - 80px);
  left: calc(50% - 80px);
  height: 160px;
  top: -webkit-calc(50% - 80px);
  top: calc(50% - 80px);
  width: 160px;
  -webkit-transform-origin: 40% 40%;
  -ms-transform-origin: 40% 40%;
  transform-origin: 40% 40%;
}
.thing:nth-of-type(21) {
  background: rgba(64, 191, 77, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 2.1s;
  animation-delay: 2.1s;
  left: -webkit-calc(50% - 84px);
  left: calc(50% - 84px);
  height: 168px;
  top: -webkit-calc(50% - 84px);
  top: calc(50% - 84px);
  width: 168px;
  -webkit-transform-origin: 42% 42%;
  -ms-transform-origin: 42% 42%;
  transform-origin: 42% 42%;
}
.thing:nth-of-type(22) {
  background: rgba(64, 191, 89, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 2.2s;
  animation-delay: 2.2s;
  left: -webkit-calc(50% - 88px);
  left: calc(50% - 88px);
  height: 176px;
  top: -webkit-calc(50% - 88px);
  top: calc(50% - 88px);
  width: 176px;
  -webkit-transform-origin: 44% 44%;
  -ms-transform-origin: 44% 44%;
  transform-origin: 44% 44%;
}
.thing:nth-of-type(23) {
  background: rgba(64, 191, 102, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 2.3s;
  animation-delay: 2.3s;
  left: -webkit-calc(50% - 92px);
  left: calc(50% - 92px);
  height: 184px;
  top: -webkit-calc(50% - 92px);
  top: calc(50% - 92px);
  width: 184px;
  -webkit-transform-origin: 46% 46%;
  -ms-transform-origin: 46% 46%;
  transform-origin: 46% 46%;
}
.thing:nth-of-type(24) {
  background: rgba(64, 191, 115, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 2.4s;
  animation-delay: 2.4s;
  left: -webkit-calc(50% - 96px);
  left: calc(50% - 96px);
  height: 192px;
  top: -webkit-calc(50% - 96px);
  top: calc(50% - 96px);
  width: 192px;
  -webkit-transform-origin: 48% 48%;
  -ms-transform-origin: 48% 48%;
  transform-origin: 48% 48%;
}
.thing:nth-of-type(25) {
  background: rgba(64, 191, 128, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 2.5s;
  animation-delay: 2.5s;
  left: -webkit-calc(50% - 100px);
  left: calc(50% - 100px);
  height: 200px;
  top: -webkit-calc(50% - 100px);
  top: calc(50% - 100px);
  width: 200px;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}
.thing:nth-of-type(26) {
  background: rgba(64, 191, 140, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 2.6s;
  animation-delay: 2.6s;
  left: -webkit-calc(50% - 104px);
  left: calc(50% - 104px);
  height: 208px;
  top: -webkit-calc(50% - 104px);
  top: calc(50% - 104px);
  width: 208px;
  -webkit-transform-origin: 52% 52%;
  -ms-transform-origin: 52% 52%;
  transform-origin: 52% 52%;
}
.thing:nth-of-type(27) {
  background: rgba(64, 191, 153, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 2.7s;
  animation-delay: 2.7s;
  left: -webkit-calc(50% - 108px);
  left: calc(50% - 108px);
  height: 216px;
  top: -webkit-calc(50% - 108px);
  top: calc(50% - 108px);
  width: 216px;
  -webkit-transform-origin: 54% 54%;
  -ms-transform-origin: 54% 54%;
  transform-origin: 54% 54%;
}
.thing:nth-of-type(28) {
  background: rgba(64, 191, 166, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 2.8s;
  animation-delay: 2.8s;
  left: -webkit-calc(50% - 112px);
  left: calc(50% - 112px);
  height: 224px;
  top: -webkit-calc(50% - 112px);
  top: calc(50% - 112px);
  width: 224px;
  -webkit-transform-origin: 56% 56%;
  -ms-transform-origin: 56% 56%;
  transform-origin: 56% 56%;
}
.thing:nth-of-type(29) {
  background: rgba(64, 191, 179, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 2.9s;
  animation-delay: 2.9s;
  left: -webkit-calc(50% - 116px);
  left: calc(50% - 116px);
  height: 232px;
  top: -webkit-calc(50% - 116px);
  top: calc(50% - 116px);
  width: 232px;
  -webkit-transform-origin: 58% 58%;
  -ms-transform-origin: 58% 58%;
  transform-origin: 58% 58%;
}
.thing:nth-of-type(30) {
  background: rgba(64, 191, 191, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
  left: -webkit-calc(50% - 120px);
  left: calc(50% - 120px);
  height: 240px;
  top: -webkit-calc(50% - 120px);
  top: calc(50% - 120px);
  width: 240px;
  -webkit-transform-origin: 60% 60%;
  -ms-transform-origin: 60% 60%;
  transform-origin: 60% 60%;
}
.thing:nth-of-type(31) {
  background: rgba(64, 178, 191, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 3.1s;
  animation-delay: 3.1s;
  left: -webkit-calc(50% - 124px);
  left: calc(50% - 124px);
  height: 248px;
  top: -webkit-calc(50% - 124px);
  top: calc(50% - 124px);
  width: 248px;
  -webkit-transform-origin: 62% 62%;
  -ms-transform-origin: 62% 62%;
  transform-origin: 62% 62%;
}
.thing:nth-of-type(32) {
  background: rgba(64, 166, 191, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 3.2s;
  animation-delay: 3.2s;
  left: -webkit-calc(50% - 128px);
  left: calc(50% - 128px);
  height: 256px;
  top: -webkit-calc(50% - 128px);
  top: calc(50% - 128px);
  width: 256px;
  -webkit-transform-origin: 64% 64%;
  -ms-transform-origin: 64% 64%;
  transform-origin: 64% 64%;
}
.thing:nth-of-type(33) {
  background: rgba(64, 153, 191, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 3.3s;
  animation-delay: 3.3s;
  left: -webkit-calc(50% - 132px);
  left: calc(50% - 132px);
  height: 264px;
  top: -webkit-calc(50% - 132px);
  top: calc(50% - 132px);
  width: 264px;
  -webkit-transform-origin: 66% 66%;
  -ms-transform-origin: 66% 66%;
  transform-origin: 66% 66%;
}
.thing:nth-of-type(34) {
  background: rgba(64, 140, 191, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 3.4s;
  animation-delay: 3.4s;
  left: -webkit-calc(50% - 136px);
  left: calc(50% - 136px);
  height: 272px;
  top: -webkit-calc(50% - 136px);
  top: calc(50% - 136px);
  width: 272px;
  -webkit-transform-origin: 68% 68%;
  -ms-transform-origin: 68% 68%;
  transform-origin: 68% 68%;
}
.thing:nth-of-type(35) {
  background: rgba(64, 127, 191, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 3.5s;
  animation-delay: 3.5s;
  left: -webkit-calc(50% - 140px);
  left: calc(50% - 140px);
  height: 280px;
  top: -webkit-calc(50% - 140px);
  top: calc(50% - 140px);
  width: 280px;
  -webkit-transform-origin: 70% 70%;
  -ms-transform-origin: 70% 70%;
  transform-origin: 70% 70%;
}
.thing:nth-of-type(36) {
  background: rgba(64, 115, 191, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 3.6s;
  animation-delay: 3.6s;
  left: -webkit-calc(50% - 144px);
  left: calc(50% - 144px);
  height: 288px;
  top: -webkit-calc(50% - 144px);
  top: calc(50% - 144px);
  width: 288px;
  -webkit-transform-origin: 72% 72%;
  -ms-transform-origin: 72% 72%;
  transform-origin: 72% 72%;
}
.thing:nth-of-type(37) {
  background: rgba(64, 102, 191, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 3.7s;
  animation-delay: 3.7s;
  left: -webkit-calc(50% - 148px);
  left: calc(50% - 148px);
  height: 296px;
  top: -webkit-calc(50% - 148px);
  top: calc(50% - 148px);
  width: 296px;
  -webkit-transform-origin: 74% 74%;
  -ms-transform-origin: 74% 74%;
  transform-origin: 74% 74%;
}
.thing:nth-of-type(38) {
  background: rgba(64, 89, 191, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 3.8s;
  animation-delay: 3.8s;
  left: -webkit-calc(50% - 152px);
  left: calc(50% - 152px);
  height: 304px;
  top: -webkit-calc(50% - 152px);
  top: calc(50% - 152px);
  width: 304px;
  -webkit-transform-origin: 76% 76%;
  -ms-transform-origin: 76% 76%;
  transform-origin: 76% 76%;
}
.thing:nth-of-type(39) {
  background: rgba(64, 76, 191, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 3.9s;
  animation-delay: 3.9s;
  left: -webkit-calc(50% - 156px);
  left: calc(50% - 156px);
  height: 312px;
  top: -webkit-calc(50% - 156px);
  top: calc(50% - 156px);
  width: 312px;
  -webkit-transform-origin: 78% 78%;
  -ms-transform-origin: 78% 78%;
  transform-origin: 78% 78%;
}
.thing:nth-of-type(40) {
  background: rgba(64, 64, 191, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
  left: -webkit-calc(50% - 160px);
  left: calc(50% - 160px);
  height: 320px;
  top: -webkit-calc(50% - 160px);
  top: calc(50% - 160px);
  width: 320px;
  -webkit-transform-origin: 80% 80%;
  -ms-transform-origin: 80% 80%;
  transform-origin: 80% 80%;
}
.thing:nth-of-type(41) {
  background: rgba(76, 64, 191, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 4.1s;
  animation-delay: 4.1s;
  left: -webkit-calc(50% - 164px);
  left: calc(50% - 164px);
  height: 328px;
  top: -webkit-calc(50% - 164px);
  top: calc(50% - 164px);
  width: 328px;
  -webkit-transform-origin: 82% 82%;
  -ms-transform-origin: 82% 82%;
  transform-origin: 82% 82%;
}
.thing:nth-of-type(42) {
  background: rgba(89, 64, 191, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 4.2s;
  animation-delay: 4.2s;
  left: -webkit-calc(50% - 168px);
  left: calc(50% - 168px);
  height: 336px;
  top: -webkit-calc(50% - 168px);
  top: calc(50% - 168px);
  width: 336px;
  -webkit-transform-origin: 84% 84%;
  -ms-transform-origin: 84% 84%;
  transform-origin: 84% 84%;
}
.thing:nth-of-type(43) {
  background: rgba(102, 64, 191, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 4.3s;
  animation-delay: 4.3s;
  left: -webkit-calc(50% - 172px);
  left: calc(50% - 172px);
  height: 344px;
  top: -webkit-calc(50% - 172px);
  top: calc(50% - 172px);
  width: 344px;
  -webkit-transform-origin: 86% 86%;
  -ms-transform-origin: 86% 86%;
  transform-origin: 86% 86%;
}
.thing:nth-of-type(44) {
  background: rgba(115, 64, 191, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 4.4s;
  animation-delay: 4.4s;
  left: -webkit-calc(50% - 176px);
  left: calc(50% - 176px);
  height: 352px;
  top: -webkit-calc(50% - 176px);
  top: calc(50% - 176px);
  width: 352px;
  -webkit-transform-origin: 88% 88%;
  -ms-transform-origin: 88% 88%;
  transform-origin: 88% 88%;
}
.thing:nth-of-type(45) {
  background: rgba(127, 64, 191, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 4.5s;
  animation-delay: 4.5s;
  left: -webkit-calc(50% - 180px);
  left: calc(50% - 180px);
  height: 360px;
  top: -webkit-calc(50% - 180px);
  top: calc(50% - 180px);
  width: 360px;
  -webkit-transform-origin: 90% 90%;
  -ms-transform-origin: 90% 90%;
  transform-origin: 90% 90%;
}
.thing:nth-of-type(46) {
  background: rgba(140, 64, 191, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 4.6s;
  animation-delay: 4.6s;
  left: -webkit-calc(50% - 184px);
  left: calc(50% - 184px);
  height: 368px;
  top: -webkit-calc(50% - 184px);
  top: calc(50% - 184px);
  width: 368px;
  -webkit-transform-origin: 92% 92%;
  -ms-transform-origin: 92% 92%;
  transform-origin: 92% 92%;
}
.thing:nth-of-type(47) {
  background: rgba(153, 64, 191, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 4.7s;
  animation-delay: 4.7s;
  left: -webkit-calc(50% - 188px);
  left: calc(50% - 188px);
  height: 376px;
  top: -webkit-calc(50% - 188px);
  top: calc(50% - 188px);
  width: 376px;
  -webkit-transform-origin: 94% 94%;
  -ms-transform-origin: 94% 94%;
  transform-origin: 94% 94%;
}
.thing:nth-of-type(48) {
  background: rgba(166, 64, 191, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 4.8s;
  animation-delay: 4.8s;
  left: -webkit-calc(50% - 192px);
  left: calc(50% - 192px);
  height: 384px;
  top: -webkit-calc(50% - 192px);
  top: calc(50% - 192px);
  width: 384px;
  -webkit-transform-origin: 96% 96%;
  -ms-transform-origin: 96% 96%;
  transform-origin: 96% 96%;
}
.thing:nth-of-type(49) {
  background: rgba(178, 64, 191, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 4.9s;
  animation-delay: 4.9s;
  left: -webkit-calc(50% - 196px);
  left: calc(50% - 196px);
  height: 392px;
  top: -webkit-calc(50% - 196px);
  top: calc(50% - 196px);
  width: 392px;
  -webkit-transform-origin: 98% 98%;
  -ms-transform-origin: 98% 98%;
  transform-origin: 98% 98%;
}
.thing:nth-of-type(50) {
  background: rgba(191, 64, 191, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
  left: -webkit-calc(50% - 200px);
  left: calc(50% - 200px);
  height: 400px;
  top: -webkit-calc(50% - 200px);
  top: calc(50% - 200px);
  width: 400px;
  -webkit-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}
.thing:nth-of-type(51) {
  background: rgba(191, 64, 179, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 5.1s;
  animation-delay: 5.1s;
  left: -webkit-calc(50% - 204px);
  left: calc(50% - 204px);
  height: 408px;
  top: -webkit-calc(50% - 204px);
  top: calc(50% - 204px);
  width: 408px;
  -webkit-transform-origin: 102% 102%;
  -ms-transform-origin: 102% 102%;
  transform-origin: 102% 102%;
}
.thing:nth-of-type(52) {
  background: rgba(191, 64, 166, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 5.2s;
  animation-delay: 5.2s;
  left: -webkit-calc(50% - 208px);
  left: calc(50% - 208px);
  height: 416px;
  top: -webkit-calc(50% - 208px);
  top: calc(50% - 208px);
  width: 416px;
  -webkit-transform-origin: 104% 104%;
  -ms-transform-origin: 104% 104%;
  transform-origin: 104% 104%;
}
.thing:nth-of-type(53) {
  background: rgba(191, 64, 153, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 5.3s;
  animation-delay: 5.3s;
  left: -webkit-calc(50% - 212px);
  left: calc(50% - 212px);
  height: 424px;
  top: -webkit-calc(50% - 212px);
  top: calc(50% - 212px);
  width: 424px;
  -webkit-transform-origin: 106% 106%;
  -ms-transform-origin: 106% 106%;
  transform-origin: 106% 106%;
}
.thing:nth-of-type(54) {
  background: rgba(191, 64, 140, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 5.4s;
  animation-delay: 5.4s;
  left: -webkit-calc(50% - 216px);
  left: calc(50% - 216px);
  height: 432px;
  top: -webkit-calc(50% - 216px);
  top: calc(50% - 216px);
  width: 432px;
  -webkit-transform-origin: 108% 108%;
  -ms-transform-origin: 108% 108%;
  transform-origin: 108% 108%;
}
.thing:nth-of-type(55) {
  background: rgba(191, 64, 128, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 5.5s;
  animation-delay: 5.5s;
  left: -webkit-calc(50% - 220px);
  left: calc(50% - 220px);
  height: 440px;
  top: -webkit-calc(50% - 220px);
  top: calc(50% - 220px);
  width: 440px;
  -webkit-transform-origin: 110% 110%;
  -ms-transform-origin: 110% 110%;
  transform-origin: 110% 110%;
}
.thing:nth-of-type(56) {
  background: rgba(191, 64, 115, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 5.6s;
  animation-delay: 5.6s;
  left: -webkit-calc(50% - 224px);
  left: calc(50% - 224px);
  height: 448px;
  top: -webkit-calc(50% - 224px);
  top: calc(50% - 224px);
  width: 448px;
  -webkit-transform-origin: 112% 112%;
  -ms-transform-origin: 112% 112%;
  transform-origin: 112% 112%;
}
.thing:nth-of-type(57) {
  background: rgba(191, 64, 102, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 5.7s;
  animation-delay: 5.7s;
  left: -webkit-calc(50% - 228px);
  left: calc(50% - 228px);
  height: 456px;
  top: -webkit-calc(50% - 228px);
  top: calc(50% - 228px);
  width: 456px;
  -webkit-transform-origin: 114% 114%;
  -ms-transform-origin: 114% 114%;
  transform-origin: 114% 114%;
}
.thing:nth-of-type(58) {
  background: rgba(191, 64, 89, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 5.8s;
  animation-delay: 5.8s;
  left: -webkit-calc(50% - 232px);
  left: calc(50% - 232px);
  height: 464px;
  top: -webkit-calc(50% - 232px);
  top: calc(50% - 232px);
  width: 464px;
  -webkit-transform-origin: 116% 116%;
  -ms-transform-origin: 116% 116%;
  transform-origin: 116% 116%;
}
.thing:nth-of-type(59) {
  background: rgba(191, 64, 77, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 5.9s;
  animation-delay: 5.9s;
  left: -webkit-calc(50% - 236px);
  left: calc(50% - 236px);
  height: 472px;
  top: -webkit-calc(50% - 236px);
  top: calc(50% - 236px);
  width: 472px;
  -webkit-transform-origin: 118% 118%;
  -ms-transform-origin: 118% 118%;
  transform-origin: 118% 118%;
}
.thing:nth-of-type(60) {
  background: rgba(191, 64, 64, 0.5);
  -webkit-animation: 12s idk alternate infinite;
  animation: 12s idk alternate infinite;
  -webkit-animation-delay: 6s;
  animation-delay: 6s;
  left: -webkit-calc(50% - 240px);
  left: calc(50% - 240px);
  height: 480px;
  top: -webkit-calc(50% - 240px);
  top: calc(50% - 240px);
  width: 480px;
  -webkit-transform-origin: 120% 120%;
  -ms-transform-origin: 120% 120%;
  transform-origin: 120% 120%;
}

@-webkit-keyframes idk {
  from {
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
  }

50% {
    -webkit-transform: scale(0.1) rotate(360deg);
    transform: scale(0.1) rotate(360deg);
  }

to {
    opacity: 1;
    -webkit-transform: scale(0.5) rotate(-360deg);
    transform: scale(0.5) rotate(-360deg);
  }
}

@keyframes idk {
  from {
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
  }

50% {
    -webkit-transform: scale(0.1) rotate(360deg);
    transform: scale(0.1) rotate(360deg);
  }

to {
    opacity: 1;
    -webkit-transform: scale(0.5) rotate(-360deg);
    transform: scale(0.5) rotate(-360deg);
  }
}

HTML

Recommendation

Join Effecthub.com