Animasi menarik ..

Animasi yg agak rumit, menarik tapi kodnya cukup panjang.

Demo

HTML view ▼

<div class='or'>
<div class='labu'>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
</div>
<div class='labu'>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
  <div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div><div class='labi'></div>
</div>
</div>
<style> 
.or {
  max-width: 400px;
  height: 700px;
  background-color: #140032;
  overflow: hidden;
  border-radius: 12px;
  margin: auto;
  perspective: 1000px;
}
.or *, .or *:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.labu:nth-child(1) {
  transform: scale(-1, -1);
}
.labu:nth-child(2) {
  transform: scale(1, -1);
}
.labi {
  width: 200px;
  height: 100px;
  -webkit-animation: eleh 3s ease-in-out infinite;
          animation: eleh 3s ease-in-out infinite;
}
.labi:after {
  content: "";
  display: inline-block;
  width: inherit;
  height: inherit;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  border-radius: 50%;
}
.labi:nth-child(1) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
.labi:nth-child(1):after {
  transform: rotate(0deg) translate(0px) scaleY(-1);
  border-color: #2b00ff;
}
.labi:nth-child(2) {
  -webkit-animation-delay: -0.02s;
          animation-delay: -0.02s;
}
.labi:nth-child(2):after {
  transform: rotate(-1.8deg) translate(4px) scaleY(-1.02);
  border-color: #2f00ff;
}
.labi:nth-child(3) {
  -webkit-animation-delay: -0.04s;
          animation-delay: -0.04s;
}
.labi:nth-child(3):after {
  transform: rotate(-3.6deg) translate(8px) scaleY(-1.04);
  border-color: #3300ff;
}
.labi:nth-child(4) {
  -webkit-animation-delay: -0.06s;
          animation-delay: -0.06s;
}
.labi:nth-child(4):after {
  transform: rotate(-5.4deg) translate(12px) scaleY(-1.06);
  border-color: #3700ff;
}
.labi:nth-child(5) {
  -webkit-animation-delay: -0.08s;
          animation-delay: -0.08s;
}
.labi:nth-child(5):after {
  transform: rotate(-7.2deg) translate(16px) scaleY(-1.08);
  border-color: #3c00ff;
}
.labi:nth-child(6) {
  -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s;
}
.labi:nth-child(6):after {
  transform: rotate(-9deg) translate(20px) scaleY(-1.1);
  border-color: #4000ff;
}
.labi:nth-child(7) {
  -webkit-animation-delay: -0.12s;
          animation-delay: -0.12s;
}
.labi:nth-child(7):after {
  transform: rotate(-10.8deg) translate(24px) scaleY(-1.12);
  border-color: #4400ff;
}
.labi:nth-child(8) {
  -webkit-animation-delay: -0.14s;
          animation-delay: -0.14s;
}
.labi:nth-child(8):after {
  transform: rotate(-12.6deg) translate(28px) scaleY(-1.14);
  border-color: #4800ff;
}
.labi:nth-child(9) {
  -webkit-animation-delay: -0.16s;
          animation-delay: -0.16s;
}
.labi:nth-child(9):after {
  transform: rotate(-14.4deg) translate(32px) scaleY(-1.16);
  border-color: #4d00ff;
}
.labi:nth-child(10) {
  -webkit-animation-delay: -0.18s;
          animation-delay: -0.18s;
}
.labi:nth-child(10):after {
  transform: rotate(-16.2deg) translate(36px) scaleY(-1.18);
  border-color: #5100ff;
}
.labi:nth-child(11) {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s;
}
.labi:nth-child(11):after {
  transform: rotate(-18deg) translate(40px) scaleY(-1.2);
  border-color: #5500ff;
}
.labi:nth-child(12) {
  -webkit-animation-delay: -0.22s;
          animation-delay: -0.22s;
}
.labi:nth-child(12):after {
  transform: rotate(-19.8deg) translate(44px) scaleY(-1.22);
  border-color: #5900ff;
}
.labi:nth-child(13) {
  -webkit-animation-delay: -0.24s;
          animation-delay: -0.24s;
}
.labi:nth-child(13):after {
  transform: rotate(-21.6deg) translate(48px) scaleY(-1.24);
  border-color: #5e00ff;
}
.labi:nth-child(14) {
  -webkit-animation-delay: -0.26s;
          animation-delay: -0.26s;
}
.labi:nth-child(14):after {
  transform: rotate(-23.4deg) translate(52px) scaleY(-1.26);
  border-color: #6200ff;
}
.labi:nth-child(15) {
  -webkit-animation-delay: -0.28s;
          animation-delay: -0.28s;
}
.labi:nth-child(15):after {
  transform: rotate(-25.2deg) translate(56px) scaleY(-1.28);
  border-color: #6600ff;
}
.labi:nth-child(16) {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s;
}
.labi:nth-child(16):after {
  transform: rotate(-27deg) translate(60px) scaleY(-1.3);
  border-color: #6a00ff;
}
.labi:nth-child(17) {
  -webkit-animation-delay: -0.32s;
          animation-delay: -0.32s;
}
.labi:nth-child(17):after {
  transform: rotate(-28.8deg) translate(64px) scaleY(-1.32);
  border-color: #6f00ff;
}
.labi:nth-child(18) {
  -webkit-animation-delay: -0.34s;
          animation-delay: -0.34s;
}
.labi:nth-child(18):after {
  transform: rotate(-30.6deg) translate(68px) scaleY(-1.34);
  border-color: #7300ff;
}
.labi:nth-child(19) {
  -webkit-animation-delay: -0.36s;
          animation-delay: -0.36s;
}
.labi:nth-child(19):after {
  transform: rotate(-32.4deg) translate(72px) scaleY(-1.36);
  border-color: #7700ff;
}
.labi:nth-child(20) {
  -webkit-animation-delay: -0.38s;
          animation-delay: -0.38s;
}
.labi:nth-child(20):after {
  transform: rotate(-34.2deg) translate(76px) scaleY(-1.38);
  border-color: #7b00ff;
}
.labi:nth-child(21) {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
}
.labi:nth-child(21):after {
  transform: rotate(-36deg) translate(80px) scaleY(-1.4);
  border-color: #8000ff;
}
.labi:nth-child(22) {
  -webkit-animation-delay: -0.42s;
          animation-delay: -0.42s;
}
.labi:nth-child(22):after {
  transform: rotate(-37.8deg) translate(84px) scaleY(-1.42);
  border-color: #8400ff;
}
.labi:nth-child(23) {
  -webkit-animation-delay: -0.44s;
          animation-delay: -0.44s;
}
.labi:nth-child(23):after {
  transform: rotate(-39.6deg) translate(88px) scaleY(-1.44);
  border-color: #8800ff;
}
.labi:nth-child(24) {
  -webkit-animation-delay: -0.46s;
          animation-delay: -0.46s;
}
.labi:nth-child(24):after {
  transform: rotate(-41.4deg) translate(92px) scaleY(-1.46);
  border-color: #8c00ff;
}
.labi:nth-child(25) {
  -webkit-animation-delay: -0.48s;
          animation-delay: -0.48s;
}
.labi:nth-child(25):after {
  transform: rotate(-43.2deg) translate(96px) scaleY(-1.48);
  border-color: #9100ff;
}
.labi:nth-child(26) {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s;
}
.labi:nth-child(26):after {
  transform: rotate(-45deg) translate(100px) scaleY(-1.5);
  border-color: #9500ff;
}
.labi:nth-child(27) {
  -webkit-animation-delay: -0.52s;
          animation-delay: -0.52s;
}
.labi:nth-child(27):after {
  transform: rotate(-46.8deg) translate(104px) scaleY(-1.52);
  border-color: #9900ff;
}
.labi:nth-child(28) {
  -webkit-animation-delay: -0.54s;
          animation-delay: -0.54s;
}
.labi:nth-child(28):after {
  transform: rotate(-48.6deg) translate(108px) scaleY(-1.54);
  border-color: #9d00ff;
}
.labi:nth-child(29) {
  -webkit-animation-delay: -0.56s;
          animation-delay: -0.56s;
}
.labi:nth-child(29):after {
  transform: rotate(-50.4deg) translate(112px) scaleY(-1.56);
  border-color: #a200ff;
}
.labi:nth-child(30) {
  -webkit-animation-delay: -0.58s;
          animation-delay: -0.58s;
}
.labi:nth-child(30):after {
  transform: rotate(-52.2deg) translate(116px) scaleY(-1.58);
  border-color: #a600ff;
}
.labi:nth-child(31) {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
}
.labi:nth-child(31):after {
  transform: rotate(-54deg) translate(120px) scaleY(-1.6);
  border-color: #aa00ff;
}
.labi:nth-child(32) {
  -webkit-animation-delay: -0.62s;
          animation-delay: -0.62s;
}
.labi:nth-child(32):after {
  transform: rotate(-55.8deg) translate(124px) scaleY(-1.62);
  border-color: #ae00ff;
}
.labi:nth-child(33) {
  -webkit-animation-delay: -0.64s;
          animation-delay: -0.64s;
}
.labi:nth-child(33):after {
  transform: rotate(-57.6deg) translate(128px) scaleY(-1.64);
  border-color: #b300ff;
}
.labi:nth-child(34) {
  -webkit-animation-delay: -0.66s;
          animation-delay: -0.66s;
}
.labi:nth-child(34):after {
  transform: rotate(-59.4deg) translate(132px) scaleY(-1.66);
  border-color: #b700ff;
}
.labi:nth-child(35) {
  -webkit-animation-delay: -0.68s;
          animation-delay: -0.68s;
}
.labi:nth-child(35):after {
  transform: rotate(-61.2deg) translate(136px) scaleY(-1.68);
  border-color: #bb00ff;
}
.labi:nth-child(36) {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s;
}
.labi:nth-child(36):after {
  transform: rotate(-63deg) translate(140px) scaleY(-1.7);
  border-color: #bf00ff;
}
.labi:nth-child(37) {
  -webkit-animation-delay: -0.72s;
          animation-delay: -0.72s;
}
.labi:nth-child(37):after {
  transform: rotate(-64.8deg) translate(144px) scaleY(-1.72);
  border-color: #c400ff;
}
.labi:nth-child(38) {
  -webkit-animation-delay: -0.74s;
          animation-delay: -0.74s;
}
.labi:nth-child(38):after {
  transform: rotate(-66.6deg) translate(148px) scaleY(-1.74);
  border-color: #c800ff;
}
.labi:nth-child(39) {
  -webkit-animation-delay: -0.76s;
          animation-delay: -0.76s;
}
.labi:nth-child(39):after {
  transform: rotate(-68.4deg) translate(152px) scaleY(-1.76);
  border-color: #cc00ff;
}
.labi:nth-child(40) {
  -webkit-animation-delay: -0.78s;
          animation-delay: -0.78s;
}
.labi:nth-child(40):after {
  transform: rotate(-70.2deg) translate(156px) scaleY(-1.78);
  border-color: #d000ff;
}
.labi:nth-child(41) {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s;
}
.labi:nth-child(41):after {
  transform: rotate(-72deg) translate(160px) scaleY(-1.8);
  border-color: #d500ff;
}
.labi:nth-child(42) {
  -webkit-animation-delay: -0.82s;
          animation-delay: -0.82s;
}
.labi:nth-child(42):after {
  transform: rotate(-73.8deg) translate(164px) scaleY(-1.82);
  border-color: #d900ff;
}
.labi:nth-child(43) {
  -webkit-animation-delay: -0.84s;
          animation-delay: -0.84s;
}
.labi:nth-child(43):after {
  transform: rotate(-75.6deg) translate(168px) scaleY(-1.84);
  border-color: #dd00ff;
}
.labi:nth-child(44) {
  -webkit-animation-delay: -0.86s;
          animation-delay: -0.86s;
}
.labi:nth-child(44):after {
  transform: rotate(-77.4deg) translate(172px) scaleY(-1.86);
  border-color: #e100ff;
}
.labi:nth-child(45) {
  -webkit-animation-delay: -0.88s;
          animation-delay: -0.88s;
}
.labi:nth-child(45):after {
  transform: rotate(-79.2deg) translate(176px) scaleY(-1.88);
  border-color: #e600ff;
}
.labi:nth-child(46) {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s;
}
.labi:nth-child(46):after {
  transform: rotate(-81deg) translate(180px) scaleY(-1.9);
  border-color: #ea00ff;
}
.labi:nth-child(47) {
  -webkit-animation-delay: -0.92s;
          animation-delay: -0.92s;
}
.labi:nth-child(47):after {
  transform: rotate(-82.8deg) translate(184px) scaleY(-1.92);
  border-color: #ee00ff;
}
.labi:nth-child(48) {
  -webkit-animation-delay: -0.94s;
          animation-delay: -0.94s;
}
.labi:nth-child(48):after {
  transform: rotate(-84.6deg) translate(188px) scaleY(-1.94);
  border-color: #f200ff;
}
.labi:nth-child(49) {
  -webkit-animation-delay: -0.96s;
          animation-delay: -0.96s;
}
.labi:nth-child(49):after {
  transform: rotate(-86.4deg) translate(192px) scaleY(-1.96);
  border-color: #f700ff;
}
.labi:nth-child(50) {
  -webkit-animation-delay: -0.98s;
          animation-delay: -0.98s;
}
.labi:nth-child(50):after {
  transform: rotate(-88.2deg) translate(196px) scaleY(-1.98);
  border-color: #fb00ff;
}
.labi:nth-child(51) {
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
}
.labi:nth-child(51):after {
  transform: rotate(-90deg) translate(200px) scaleY(-2);
  border-color: fuchsia;
}
@-webkit-keyframes eleh {
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
@keyframes eleh {
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
  </style>

Tutup

CSS dicontoh dari codepen/Tsankashvili