Tangga tak berpenghujung

Demo

<div class="labu">
<div class="hoop">
  <div class="ring ring-0">
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="planks">
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
    </div>
  </div>
  <div class="ring ring-1">
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
  </div>
</div>
</div>
<style>
  .labu {
  margin: 0;
  padding: 0;
  background: #111;
  height: 60vh;
  position: relative;
}
.hoop {
  position: absolute;
  top: 44%;
  left: 50%;
  transform-style: preserve-3d;
  -webkit-animation: show 12s linear infinite;
          animation: show 12s linear infinite;
}
@-webkit-keyframes show {
  from {
    transform: rotateX(-20deg) rotateY(0deg);
  }
  to {
    transform: rotateX(-20deg) rotateY(360deg);
  }
}
@keyframes show {
  from {
    transform: rotateX(-20deg) rotateY(0deg);
  }
  to {
    transform: rotateX(-20deg) rotateY(360deg);
  }
}
.ring {
  position: absolute;
  transform-style: preserve-3d;
  height: 120px;
}
.step {
  position: absolute;
  left: -9.7738438112px;
  width: 19.5476876223px;
  height: 120px;
  -webkit-animation: drop 21.6s ease infinite;
          animation: drop 21.6s ease infinite;
}
.planks {
  position: absolute;
  transform-style: preserve-3d;
}
.plank-holder {
  position: absolute;
  left: -9.7738438112px;
  transform-style: preserve-3d;
  -webkit-animation: drop 21.6s ease infinite;
          animation: drop 21.6s ease infinite;
}
.plank {
  position: absolute;
  background-color: #29dcea;
  width: 19.5476876223px;
  height: 60px;
}
.ring-0 {
  transform: translateY(-60px);
}
.ring-0 .step {
  background: linear-gradient(to top, #111, #111 40%, #14BFCC);
}
.ring-0 .step-holder:nth-child(1) {
  transform: rotateY(10deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(1) .step {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
}
.plank-holder:nth-child(1) {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
}
.plank-holder:nth-child(1) .plank {
  transform: translateY(-30px) rotateY(10deg) translateZ(110px) rotateX(90deg);
}
.ring-0 .step-holder:nth-child(2) {
  transform: rotateY(20deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(2) .step {
  -webkit-animation-delay: -1.2s;
          animation-delay: -1.2s;
}
.plank-holder:nth-child(2) {
  -webkit-animation-delay: -1.2s;
          animation-delay: -1.2s;
}
.plank-holder:nth-child(2) .plank {
  transform: translateY(-30px) rotateY(20deg) translateZ(110px) rotateX(90deg);
}
.ring-0 .step-holder:nth-child(3) {
  transform: rotateY(30deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(3) .step {
  -webkit-animation-delay: -1.8s;
          animation-delay: -1.8s;
}
.plank-holder:nth-child(3) {
  -webkit-animation-delay: -1.8s;
          animation-delay: -1.8s;
}
.plank-holder:nth-child(3) .plank {
  transform: translateY(-30px) rotateY(30deg) translateZ(110px) rotateX(90deg);
}
.ring-0 .step-holder:nth-child(4) {
  transform: rotateY(40deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(4) .step {
  -webkit-animation-delay: -2.4s;
          animation-delay: -2.4s;
}
.plank-holder:nth-child(4) {
  -webkit-animation-delay: -2.4s;
          animation-delay: -2.4s;
}
.plank-holder:nth-child(4) .plank {
  transform: translateY(-30px) rotateY(40deg) translateZ(110px) rotateX(90deg);
}
.ring-0 .step-holder:nth-child(5) {
  transform: rotateY(50deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(5) .step {
  -webkit-animation-delay: -3s;
          animation-delay: -3s;
}
.plank-holder:nth-child(5) {
  -webkit-animation-delay: -3s;
          animation-delay: -3s;
}
.plank-holder:nth-child(5) .plank {
  transform: translateY(-30px) rotateY(50deg) translateZ(110px) rotateX(90deg);
}
.ring-0 .step-holder:nth-child(6) {
  transform: rotateY(60deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(6) .step {
  -webkit-animation-delay: -3.6s;
          animation-delay: -3.6s;
}
.plank-holder:nth-child(6) {
  -webkit-animation-delay: -3.6s;
          animation-delay: -3.6s;
}
.plank-holder:nth-child(6) .plank {
  transform: translateY(-30px) rotateY(60deg) translateZ(110px) rotateX(90deg);
}
.ring-0 .step-holder:nth-child(7) {
  transform: rotateY(70deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(7) .step {
  -webkit-animation-delay: -4.2s;
          animation-delay: -4.2s;
}
.plank-holder:nth-child(7) {
  -webkit-animation-delay: -4.2s;
          animation-delay: -4.2s;
}
.plank-holder:nth-child(7) .plank {
  transform: translateY(-30px) rotateY(70deg) translateZ(110px) rotateX(90deg);
}
.ring-0 .step-holder:nth-child(8) {
  transform: rotateY(80deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(8) .step {
  -webkit-animation-delay: -4.8s;
          animation-delay: -4.8s;
}
.plank-holder:nth-child(8) {
  -webkit-animation-delay: -4.8s;
          animation-delay: -4.8s;
}
.plank-holder:nth-child(8) .plank {
  transform: translateY(-30px) rotateY(80deg) translateZ(110px) rotateX(90deg);
}
.ring-0 .step-holder:nth-child(9) {
  transform: rotateY(90deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(9) .step {
  -webkit-animation-delay: -5.4s;
          animation-delay: -5.4s;
}
.plank-holder:nth-child(9) {
  -webkit-animation-delay: -5.4s;
          animation-delay: -5.4s;
}
.plank-holder:nth-child(9) .plank {
  transform: translateY(-30px) rotateY(90deg) translateZ(110px) rotateX(90deg);
}
.ring-0 .step-holder:nth-child(10) {
  transform: rotateY(100deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(10) .step {
  -webkit-animation-delay: -6s;
          animation-delay: -6s;
}
.plank-holder:nth-child(10) {
  -webkit-animation-delay: -6s;
          animation-delay: -6s;
}
.plank-holder:nth-child(10) .plank {
  transform: translateY(-30px) rotateY(100deg) translateZ(110px) rotateX(90deg);
}
.ring-0 .step-holder:nth-child(11) {
  transform: rotateY(110deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(11) .step {
  -webkit-animation-delay: -6.6s;
          animation-delay: -6.6s;
}
.plank-holder:nth-child(11) {
  -webkit-animation-delay: -6.6s;
          animation-delay: -6.6s;
}
.plank-holder:nth-child(11) .plank {
  transform: translateY(-30px) rotateY(110deg) translateZ(110px) rotateX(90deg);
}
.ring-0 .step-holder:nth-child(12) {
  transform: rotateY(120deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(12) .step {
  -webkit-animation-delay: -7.2s;
          animation-delay: -7.2s;
}
.plank-holder:nth-child(12) {
  -webkit-animation-delay: -7.2s;
          animation-delay: -7.2s;
}
.plank-holder:nth-child(12) .plank {
  transform: translateY(-30px) rotateY(120deg) translateZ(110px) rotateX(90deg);
}
.ring-0 .step-holder:nth-child(13) {
  transform: rotateY(130deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(13) .step {
  -webkit-animation-delay: -7.8s;
          animation-delay: -7.8s;
}
.plank-holder:nth-child(13) {
  -webkit-animation-delay: -7.8s;
          animation-delay: -7.8s;
}
.plank-holder:nth-child(13) .plank {
  transform: translateY(-30px) rotateY(130deg) translateZ(110px) rotateX(90deg);
}
.ring-0 .step-holder:nth-child(14) {
  transform: rotateY(140deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(14) .step {
  -webkit-animation-delay: -8.4s;
          animation-delay: -8.4s;
}
.plank-holder:nth-child(14) {
  -webkit-animation-delay: -8.4s;
          animation-delay: -8.4s;
}
.plank-holder:nth-child(14) .plank {
  transform: translateY(-30px) rotateY(140deg) translateZ(110px) rotateX(90deg);
}
.ring-0 .step-holder:nth-child(15) {
  transform: rotateY(150deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(15) .step {
  -webkit-animation-delay: -9s;
          animation-delay: -9s;
}
.plank-holder:nth-child(15) {
  -webkit-animation-delay: -9s;
          animation-delay: -9s;
}
.plank-holder:nth-child(15) .plank {
  transform: translateY(-30px) rotateY(150deg) translateZ(110px) rotateX(90deg);
}
.ring-0 .step-holder:nth-child(16) {
  transform: rotateY(160deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(16) .step {
  -webkit-animation-delay: -9.6s;
          animation-delay: -9.6s;
}
.plank-holder:nth-child(16) {
  -webkit-animation-delay: -9.6s;
          animation-delay: -9.6s;
}
.plank-holder:nth-child(16) .plank {
  transform: translateY(-30px) rotateY(160deg) translateZ(110px) rotateX(90deg);
}
.ring-0 .step-holder:nth-child(17) {
  transform: rotateY(170deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(17) .step {
  -webkit-animation-delay: -10.2s;
          animation-delay: -10.2s;
}
.plank-holder:nth-child(17) {
  -webkit-animation-delay: -10.2s;
          animation-delay: -10.2s;
}
.plank-holder:nth-child(17) .plank {
  transform: translateY(-30px) rotateY(170deg) translateZ(110px) rotateX(90deg);
}
.ring-0 .step-holder:nth-child(18) {
  transform: rotateY(180deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(18) .step {
  -webkit-animation-delay: -10.8s;
          animation-delay: -10.8s;
}
.plank-holder:nth-child(18) {
  -webkit-animation-delay: -10.8s;
          animation-delay: -10.8s;
}
.plank-holder:nth-child(18) .plank {
  transform: translateY(-30px) rotateY(180deg) translateZ(110px) rotateX(90deg);
}
.ring-0 .step-holder:nth-child(19) {
  transform: rotateY(190deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(19) .step {
  -webkit-animation-delay: -11.4s;
          animation-delay: -11.4s;
}
.plank-holder:nth-child(19) {
  -webkit-animation-delay: -11.4s;
          animation-delay: -11.4s;
}
.plank-holder:nth-child(19) .plank {
  transform: translateY(-30px) rotateY(190deg) translateZ(110px) rotateX(90deg);
}
.ring-0 .step-holder:nth-child(20) {
  transform: rotateY(200deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(20) .step {
  -webkit-animation-delay: -12s;
          animation-delay: -12s;
}
.plank-holder:nth-child(20) {
  -webkit-animation-delay: -12s;
          animation-delay: -12s;
}
.plank-holder:nth-child(20) .plank {
  transform: translateY(-30px) rotateY(200deg) translateZ(110px) rotateX(90deg);
}
.ring-0 .step-holder:nth-child(21) {
  transform: rotateY(210deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(21) .step {
  -webkit-animation-delay: -12.6s;
          animation-delay: -12.6s;
}
.plank-holder:nth-child(21) {
  -webkit-animation-delay: -12.6s;
          animation-delay: -12.6s;
}
.plank-holder:nth-child(21) .plank {
  transform: translateY(-30px) rotateY(210deg) translateZ(110px) rotateX(90deg);
}
.ring-0 .step-holder:nth-child(22) {
  transform: rotateY(220deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(22) .step {
  -webkit-animation-delay: -13.2s;
          animation-delay: -13.2s;
}
.plank-holder:nth-child(22) {
  -webkit-animation-delay: -13.2s;
          animation-delay: -13.2s;
}
.plank-holder:nth-child(22) .plank {
  transform: translateY(-30px) rotateY(220deg) translateZ(110px) rotateX(90deg);
}
.ring-0 .step-holder:nth-child(23) {
  transform: rotateY(230deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(23) .step {
  -webkit-animation-delay: -13.8s;
          animation-delay: -13.8s;
}
.plank-holder:nth-child(23) {
  -webkit-animation-delay: -13.8s;
          animation-delay: -13.8s;
}
.plank-holder:nth-child(23) .plank {
  transform: translateY(-30px) rotateY(230deg) translateZ(110px) rotateX(90deg);
}
.ring-0 .step-holder:nth-child(24) {
  transform: rotateY(240deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(24) .step {
  -webkit-animation-delay: -14.4s;
          animation-delay: -14.4s;
}
.plank-holder:nth-child(24) {
  -webkit-animation-delay: -14.4s;
          animation-delay: -14.4s;
}
.plank-holder:nth-child(24) .plank {
  transform: translateY(-30px) rotateY(240deg) translateZ(110px) rotateX(90deg);
}
.ring-0 .step-holder:nth-child(25) {
  transform: rotateY(250deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(25) .step {
  -webkit-animation-delay: -15s;
          animation-delay: -15s;
}
.plank-holder:nth-child(25) {
  -webkit-animation-delay: -15s;
          animation-delay: -15s;
}
.plank-holder:nth-child(25) .plank {
  transform: translateY(-30px) rotateY(250deg) translateZ(110px) rotateX(90deg);
}
.ring-0 .step-holder:nth-child(26) {
  transform: rotateY(260deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(26) .step {
  -webkit-animation-delay: -15.6s;
          animation-delay: -15.6s;
}
.plank-holder:nth-child(26) {
  -webkit-animation-delay: -15.6s;
          animation-delay: -15.6s;
}
.plank-holder:nth-child(26) .plank {
  transform: translateY(-30px) rotateY(260deg) translateZ(110px) rotateX(90deg);
}
.ring-0 .step-holder:nth-child(27) {
  transform: rotateY(270deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(27) .step {
  -webkit-animation-delay: -16.2s;
          animation-delay: -16.2s;
}
.plank-holder:nth-child(27) {
  -webkit-animation-delay: -16.2s;
          animation-delay: -16.2s;
}
.plank-holder:nth-child(27) .plank {
  transform: translateY(-30px) rotateY(270deg) translateZ(110px) rotateX(90deg);
}
.ring-0 .step-holder:nth-child(28) {
  transform: rotateY(280deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(28) .step {
  -webkit-animation-delay: -16.8s;
          animation-delay: -16.8s;
}
.plank-holder:nth-child(28) {
  -webkit-animation-delay: -16.8s;
          animation-delay: -16.8s;
}
.plank-holder:nth-child(28) .plank {
  transform: translateY(-30px) rotateY(280deg) translateZ(110px) rotateX(90deg);
}
.ring-0 .step-holder:nth-child(29) {
  transform: rotateY(290deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(29) .step {
  -webkit-animation-delay: -17.4s;
          animation-delay: -17.4s;
}
.plank-holder:nth-child(29) {
  -webkit-animation-delay: -17.4s;
          animation-delay: -17.4s;
}
.plank-holder:nth-child(29) .plank {
  transform: translateY(-30px) rotateY(290deg) translateZ(110px) rotateX(90deg);
}
.ring-0 .step-holder:nth-child(30) {
  transform: rotateY(300deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(30) .step {
  -webkit-animation-delay: -18s;
          animation-delay: -18s;
}
.plank-holder:nth-child(30) {
  -webkit-animation-delay: -18s;
          animation-delay: -18s;
}
.plank-holder:nth-child(30) .plank {
  transform: translateY(-30px) rotateY(300deg) translateZ(110px) rotateX(90deg);
}
.ring-0 .step-holder:nth-child(31) {
  transform: rotateY(310deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(31) .step {
  -webkit-animation-delay: -18.6s;
          animation-delay: -18.6s;
}
.plank-holder:nth-child(31) {
  -webkit-animation-delay: -18.6s;
          animation-delay: -18.6s;
}
.plank-holder:nth-child(31) .plank {
  transform: translateY(-30px) rotateY(310deg) translateZ(110px) rotateX(90deg);
}
.ring-0 .step-holder:nth-child(32) {
  transform: rotateY(320deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(32) .step {
  -webkit-animation-delay: -19.2s;
          animation-delay: -19.2s;
}
.plank-holder:nth-child(32) {
  -webkit-animation-delay: -19.2s;
          animation-delay: -19.2s;
}
.plank-holder:nth-child(32) .plank {
  transform: translateY(-30px) rotateY(320deg) translateZ(110px) rotateX(90deg);
}
.ring-0 .step-holder:nth-child(33) {
  transform: rotateY(330deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(33) .step {
  -webkit-animation-delay: -19.8s;
          animation-delay: -19.8s;
}
.plank-holder:nth-child(33) {
  -webkit-animation-delay: -19.8s;
          animation-delay: -19.8s;
}
.plank-holder:nth-child(33) .plank {
  transform: translateY(-30px) rotateY(330deg) translateZ(110px) rotateX(90deg);
}
.ring-0 .step-holder:nth-child(34) {
  transform: rotateY(340deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(34) .step {
  -webkit-animation-delay: -20.4s;
          animation-delay: -20.4s;
}
.plank-holder:nth-child(34) {
  -webkit-animation-delay: -20.4s;
          animation-delay: -20.4s;
}
.plank-holder:nth-child(34) .plank {
  transform: translateY(-30px) rotateY(340deg) translateZ(110px) rotateX(90deg);
}
.ring-0 .step-holder:nth-child(35) {
  transform: rotateY(350deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(35) .step {
  -webkit-animation-delay: -21s;
          animation-delay: -21s;
}
.plank-holder:nth-child(35) {
  -webkit-animation-delay: -21s;
          animation-delay: -21s;
}
.plank-holder:nth-child(35) .plank {
  transform: translateY(-30px) rotateY(350deg) translateZ(110px) rotateX(90deg);
}
.ring-0 .step-holder:nth-child(36) {
  transform: rotateY(360deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(36) .step {
  -webkit-animation-delay: -21.6s;
          animation-delay: -21.6s;
}
.plank-holder:nth-child(36) {
  -webkit-animation-delay: -21.6s;
          animation-delay: -21.6s;
}
.plank-holder:nth-child(36) .plank {
  transform: translateY(-30px) rotateY(360deg) translateZ(110px) rotateX(90deg);
}
.ring-1 {
  transform: translateY(-60px);
}
.ring-1 .step {
  background: linear-gradient(to top, #111, #111 40%, #14BFCC);
}
.ring-1 .step-holder:nth-child(1) {
  transform: rotateY(10deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(1) .step {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
}
.plank-holder:nth-child(1) {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
}
.plank-holder:nth-child(1) .plank {
  transform: translateY(-30px) rotateY(10deg) translateZ(110px) rotateX(90deg);
}
.ring-1 .step-holder:nth-child(2) {
  transform: rotateY(20deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(2) .step {
  -webkit-animation-delay: -1.2s;
          animation-delay: -1.2s;
}
.plank-holder:nth-child(2) {
  -webkit-animation-delay: -1.2s;
          animation-delay: -1.2s;
}
.plank-holder:nth-child(2) .plank {
  transform: translateY(-30px) rotateY(20deg) translateZ(110px) rotateX(90deg);
}
.ring-1 .step-holder:nth-child(3) {
  transform: rotateY(30deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(3) .step {
  -webkit-animation-delay: -1.8s;
          animation-delay: -1.8s;
}
.plank-holder:nth-child(3) {
  -webkit-animation-delay: -1.8s;
          animation-delay: -1.8s;
}
.plank-holder:nth-child(3) .plank {
  transform: translateY(-30px) rotateY(30deg) translateZ(110px) rotateX(90deg);
}
.ring-1 .step-holder:nth-child(4) {
  transform: rotateY(40deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(4) .step {
  -webkit-animation-delay: -2.4s;
          animation-delay: -2.4s;
}
.plank-holder:nth-child(4) {
  -webkit-animation-delay: -2.4s;
          animation-delay: -2.4s;
}
.plank-holder:nth-child(4) .plank {
  transform: translateY(-30px) rotateY(40deg) translateZ(110px) rotateX(90deg);
}
.ring-1 .step-holder:nth-child(5) {
  transform: rotateY(50deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(5) .step {
  -webkit-animation-delay: -3s;
          animation-delay: -3s;
}
.plank-holder:nth-child(5) {
  -webkit-animation-delay: -3s;
          animation-delay: -3s;
}
.plank-holder:nth-child(5) .plank {
  transform: translateY(-30px) rotateY(50deg) translateZ(110px) rotateX(90deg);
}
.ring-1 .step-holder:nth-child(6) {
  transform: rotateY(60deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(6) .step {
  -webkit-animation-delay: -3.6s;
          animation-delay: -3.6s;
}
.plank-holder:nth-child(6) {
  -webkit-animation-delay: -3.6s;
          animation-delay: -3.6s;
}
.plank-holder:nth-child(6) .plank {
  transform: translateY(-30px) rotateY(60deg) translateZ(110px) rotateX(90deg);
}
.ring-1 .step-holder:nth-child(7) {
  transform: rotateY(70deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(7) .step {
  -webkit-animation-delay: -4.2s;
          animation-delay: -4.2s;
}
.plank-holder:nth-child(7) {
  -webkit-animation-delay: -4.2s;
          animation-delay: -4.2s;
}
.plank-holder:nth-child(7) .plank {
  transform: translateY(-30px) rotateY(70deg) translateZ(110px) rotateX(90deg);
}
.ring-1 .step-holder:nth-child(8) {
  transform: rotateY(80deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(8) .step {
  -webkit-animation-delay: -4.8s;
          animation-delay: -4.8s;
}
.plank-holder:nth-child(8) {
  -webkit-animation-delay: -4.8s;
          animation-delay: -4.8s;
}
.plank-holder:nth-child(8) .plank {
  transform: translateY(-30px) rotateY(80deg) translateZ(110px) rotateX(90deg);
}
.ring-1 .step-holder:nth-child(9) {
  transform: rotateY(90deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(9) .step {
  -webkit-animation-delay: -5.4s;
          animation-delay: -5.4s;
}
.plank-holder:nth-child(9) {
  -webkit-animation-delay: -5.4s;
          animation-delay: -5.4s;
}
.plank-holder:nth-child(9) .plank {
  transform: translateY(-30px) rotateY(90deg) translateZ(110px) rotateX(90deg);
}
.ring-1 .step-holder:nth-child(10) {
  transform: rotateY(100deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(10) .step {
  -webkit-animation-delay: -6s;
          animation-delay: -6s;
}
.plank-holder:nth-child(10) {
  -webkit-animation-delay: -6s;
          animation-delay: -6s;
}
.plank-holder:nth-child(10) .plank {
  transform: translateY(-30px) rotateY(100deg) translateZ(110px) rotateX(90deg);
}
.ring-1 .step-holder:nth-child(11) {
  transform: rotateY(110deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(11) .step {
  -webkit-animation-delay: -6.6s;
          animation-delay: -6.6s;
}
.plank-holder:nth-child(11) {
  -webkit-animation-delay: -6.6s;
          animation-delay: -6.6s;
}
.plank-holder:nth-child(11) .plank {
  transform: translateY(-30px) rotateY(110deg) translateZ(110px) rotateX(90deg);
}
.ring-1 .step-holder:nth-child(12) {
  transform: rotateY(120deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(12) .step {
  -webkit-animation-delay: -7.2s;
          animation-delay: -7.2s;
}
.plank-holder:nth-child(12) {
  -webkit-animation-delay: -7.2s;
          animation-delay: -7.2s;
}
.plank-holder:nth-child(12) .plank {
  transform: translateY(-30px) rotateY(120deg) translateZ(110px) rotateX(90deg);
}
.ring-1 .step-holder:nth-child(13) {
  transform: rotateY(130deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(13) .step {
  -webkit-animation-delay: -7.8s;
          animation-delay: -7.8s;
}
.plank-holder:nth-child(13) {
  -webkit-animation-delay: -7.8s;
          animation-delay: -7.8s;
}
.plank-holder:nth-child(13) .plank {
  transform: translateY(-30px) rotateY(130deg) translateZ(110px) rotateX(90deg);
}
.ring-1 .step-holder:nth-child(14) {
  transform: rotateY(140deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(14) .step {
  -webkit-animation-delay: -8.4s;
          animation-delay: -8.4s;
}
.plank-holder:nth-child(14) {
  -webkit-animation-delay: -8.4s;
          animation-delay: -8.4s;
}
.plank-holder:nth-child(14) .plank {
  transform: translateY(-30px) rotateY(140deg) translateZ(110px) rotateX(90deg);
}
.ring-1 .step-holder:nth-child(15) {
  transform: rotateY(150deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(15) .step {
  -webkit-animation-delay: -9s;
          animation-delay: -9s;
}
.plank-holder:nth-child(15) {
  -webkit-animation-delay: -9s;
          animation-delay: -9s;
}
.plank-holder:nth-child(15) .plank {
  transform: translateY(-30px) rotateY(150deg) translateZ(110px) rotateX(90deg);
}
.ring-1 .step-holder:nth-child(16) {
  transform: rotateY(160deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(16) .step {
  -webkit-animation-delay: -9.6s;
          animation-delay: -9.6s;
}
.plank-holder:nth-child(16) {
  -webkit-animation-delay: -9.6s;
          animation-delay: -9.6s;
}
.plank-holder:nth-child(16) .plank {
  transform: translateY(-30px) rotateY(160deg) translateZ(110px) rotateX(90deg);
}
.ring-1 .step-holder:nth-child(17) {
  transform: rotateY(170deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(17) .step {
  -webkit-animation-delay: -10.2s;
          animation-delay: -10.2s;
}
.plank-holder:nth-child(17) {
  -webkit-animation-delay: -10.2s;
          animation-delay: -10.2s;
}
.plank-holder:nth-child(17) .plank {
  transform: translateY(-30px) rotateY(170deg) translateZ(110px) rotateX(90deg);
}
.ring-1 .step-holder:nth-child(18) {
  transform: rotateY(180deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(18) .step {
  -webkit-animation-delay: -10.8s;
          animation-delay: -10.8s;
}
.plank-holder:nth-child(18) {
  -webkit-animation-delay: -10.8s;
          animation-delay: -10.8s;
}
.plank-holder:nth-child(18) .plank {
  transform: translateY(-30px) rotateY(180deg) translateZ(110px) rotateX(90deg);
}
.ring-1 .step-holder:nth-child(19) {
  transform: rotateY(190deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(19) .step {
  -webkit-animation-delay: -11.4s;
          animation-delay: -11.4s;
}
.plank-holder:nth-child(19) {
  -webkit-animation-delay: -11.4s;
          animation-delay: -11.4s;
}
.plank-holder:nth-child(19) .plank {
  transform: translateY(-30px) rotateY(190deg) translateZ(110px) rotateX(90deg);
}
.ring-1 .step-holder:nth-child(20) {
  transform: rotateY(200deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(20) .step {
  -webkit-animation-delay: -12s;
          animation-delay: -12s;
}
.plank-holder:nth-child(20) {
  -webkit-animation-delay: -12s;
          animation-delay: -12s;
}
.plank-holder:nth-child(20) .plank {
  transform: translateY(-30px) rotateY(200deg) translateZ(110px) rotateX(90deg);
}
.ring-1 .step-holder:nth-child(21) {
  transform: rotateY(210deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(21) .step {
  -webkit-animation-delay: -12.6s;
          animation-delay: -12.6s;
}
.plank-holder:nth-child(21) {
  -webkit-animation-delay: -12.6s;
          animation-delay: -12.6s;
}
.plank-holder:nth-child(21) .plank {
  transform: translateY(-30px) rotateY(210deg) translateZ(110px) rotateX(90deg);
}
.ring-1 .step-holder:nth-child(22) {
  transform: rotateY(220deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(22) .step {
  -webkit-animation-delay: -13.2s;
          animation-delay: -13.2s;
}
.plank-holder:nth-child(22) {
  -webkit-animation-delay: -13.2s;
          animation-delay: -13.2s;
}
.plank-holder:nth-child(22) .plank {
  transform: translateY(-30px) rotateY(220deg) translateZ(110px) rotateX(90deg);
}
.ring-1 .step-holder:nth-child(23) {
  transform: rotateY(230deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(23) .step {
  -webkit-animation-delay: -13.8s;
          animation-delay: -13.8s;
}
.plank-holder:nth-child(23) {
  -webkit-animation-delay: -13.8s;
          animation-delay: -13.8s;
}
.plank-holder:nth-child(23) .plank {
  transform: translateY(-30px) rotateY(230deg) translateZ(110px) rotateX(90deg);
}
.ring-1 .step-holder:nth-child(24) {
  transform: rotateY(240deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(24) .step {
  -webkit-animation-delay: -14.4s;
          animation-delay: -14.4s;
}
.plank-holder:nth-child(24) {
  -webkit-animation-delay: -14.4s;
          animation-delay: -14.4s;
}
.plank-holder:nth-child(24) .plank {
  transform: translateY(-30px) rotateY(240deg) translateZ(110px) rotateX(90deg);
}
.ring-1 .step-holder:nth-child(25) {
  transform: rotateY(250deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(25) .step {
  -webkit-animation-delay: -15s;
          animation-delay: -15s;
}
.plank-holder:nth-child(25) {
  -webkit-animation-delay: -15s;
          animation-delay: -15s;
}
.plank-holder:nth-child(25) .plank {
  transform: translateY(-30px) rotateY(250deg) translateZ(110px) rotateX(90deg);
}
.ring-1 .step-holder:nth-child(26) {
  transform: rotateY(260deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(26) .step {
  -webkit-animation-delay: -15.6s;
          animation-delay: -15.6s;
}
.plank-holder:nth-child(26) {
  -webkit-animation-delay: -15.6s;
          animation-delay: -15.6s;
}
.plank-holder:nth-child(26) .plank {
  transform: translateY(-30px) rotateY(260deg) translateZ(110px) rotateX(90deg);
}
.ring-1 .step-holder:nth-child(27) {
  transform: rotateY(270deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(27) .step {
  -webkit-animation-delay: -16.2s;
          animation-delay: -16.2s;
}
.plank-holder:nth-child(27) {
  -webkit-animation-delay: -16.2s;
          animation-delay: -16.2s;
}
.plank-holder:nth-child(27) .plank {
  transform: translateY(-30px) rotateY(270deg) translateZ(110px) rotateX(90deg);
}
.ring-1 .step-holder:nth-child(28) {
  transform: rotateY(280deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(28) .step {
  -webkit-animation-delay: -16.8s;
          animation-delay: -16.8s;
}
.plank-holder:nth-child(28) {
  -webkit-animation-delay: -16.8s;
          animation-delay: -16.8s;
}
.plank-holder:nth-child(28) .plank {
  transform: translateY(-30px) rotateY(280deg) translateZ(110px) rotateX(90deg);
}
.ring-1 .step-holder:nth-child(29) {
  transform: rotateY(290deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(29) .step {
  -webkit-animation-delay: -17.4s;
          animation-delay: -17.4s;
}
.plank-holder:nth-child(29) {
  -webkit-animation-delay: -17.4s;
          animation-delay: -17.4s;
}
.plank-holder:nth-child(29) .plank {
  transform: translateY(-30px) rotateY(290deg) translateZ(110px) rotateX(90deg);
}
.ring-1 .step-holder:nth-child(30) {
  transform: rotateY(300deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(30) .step {
  -webkit-animation-delay: -18s;
          animation-delay: -18s;
}
.plank-holder:nth-child(30) {
  -webkit-animation-delay: -18s;
          animation-delay: -18s;
}
.plank-holder:nth-child(30) .plank {
  transform: translateY(-30px) rotateY(300deg) translateZ(110px) rotateX(90deg);
}
.ring-1 .step-holder:nth-child(31) {
  transform: rotateY(310deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(31) .step {
  -webkit-animation-delay: -18.6s;
          animation-delay: -18.6s;
}
.plank-holder:nth-child(31) {
  -webkit-animation-delay: -18.6s;
          animation-delay: -18.6s;
}
.plank-holder:nth-child(31) .plank {
  transform: translateY(-30px) rotateY(310deg) translateZ(110px) rotateX(90deg);
}
.ring-1 .step-holder:nth-child(32) {
  transform: rotateY(320deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(32) .step {
  -webkit-animation-delay: -19.2s;
          animation-delay: -19.2s;
}
.plank-holder:nth-child(32) {
  -webkit-animation-delay: -19.2s;
          animation-delay: -19.2s;
}
.plank-holder:nth-child(32) .plank {
  transform: translateY(-30px) rotateY(320deg) translateZ(110px) rotateX(90deg);
}
.ring-1 .step-holder:nth-child(33) {
  transform: rotateY(330deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(33) .step {
  -webkit-animation-delay: -19.8s;
          animation-delay: -19.8s;
}
.plank-holder:nth-child(33) {
  -webkit-animation-delay: -19.8s;
          animation-delay: -19.8s;
}
.plank-holder:nth-child(33) .plank {
  transform: translateY(-30px) rotateY(330deg) translateZ(110px) rotateX(90deg);
}
.ring-1 .step-holder:nth-child(34) {
  transform: rotateY(340deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(34) .step {
  -webkit-animation-delay: -20.4s;
          animation-delay: -20.4s;
}
.plank-holder:nth-child(34) {
  -webkit-animation-delay: -20.4s;
          animation-delay: -20.4s;
}
.plank-holder:nth-child(34) .plank {
  transform: translateY(-30px) rotateY(340deg) translateZ(110px) rotateX(90deg);
}
.ring-1 .step-holder:nth-child(35) {
  transform: rotateY(350deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(35) .step {
  -webkit-animation-delay: -21s;
          animation-delay: -21s;
}
.plank-holder:nth-child(35) {
  -webkit-animation-delay: -21s;
          animation-delay: -21s;
}
.plank-holder:nth-child(35) .plank {
  transform: translateY(-30px) rotateY(350deg) translateZ(110px) rotateX(90deg);
}
.ring-1 .step-holder:nth-child(36) {
  transform: rotateY(360deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(36) .step {
  -webkit-animation-delay: -21.6s;
          animation-delay: -21.6s;
}
.plank-holder:nth-child(36) {
  -webkit-animation-delay: -21.6s;
          animation-delay: -21.6s;
}
.plank-holder:nth-child(36) .plank {
  transform: translateY(-30px) rotateY(360deg) translateZ(110px) rotateX(90deg);
}
@-webkit-keyframes drop {
  0% {
    transform: translateY(0);
  }
  97.2222222222% {
    transform: translateY(100px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes drop {
  0% {
    transform: translateY(0);
  }
  97.2222222222% {
    transform: translateY(100px);
  }
  100% {
    transform: translateY(0);
  }
}
</style>

Rujukan CSS di codepen.io/kzf/pen/OXgLrP