.shead span {
    cursor: pointer;
    display: inline-block;
    user-select: none;
    
  }
.shead span:nth-child(1).active {
    animation: balance 1.5s ease-out ;
    transform-origin: bottom left;

  }
  @keyframes balance{
    0%, 100% {
      transform: rotate(0deg);
    }
    30%, 60% {
      transform: rotate(-45deg);
    }
    
  }
  
  .shead span:nth-child(2).active {
    animation: shrinkjump 1s ease-in-out;
    transform-origin: bottom center;
  }
  
  @keyframes shrinkjump {
    10%, 35% {
      transform: scale(2, .2) translate(0, 0);
    }
    
    45%, 50% {
      transform: scale(1) translate(0, -150px);
    }
    
    80% {
      transform: scale(1) translate(0, 0);
    }
  }
  
  .shead span:nth-child(3).active {
    animation: falling 2s ease-out;
    transform-origin: bottom center;
  }
  
  @keyframes falling {
    12% {
      transform: rotateX(240deg);
    }
    
    24% {
      transform: rotateX(150deg);
    }
    
    36% {
      transform: rotateX(200deg);
    }
    
    48% {
      transform: rotateX(175deg);
    }
    
    60%, 85% {
      transform: rotateX(180deg);
    }
    
    100% {
      transform: rotateX(0deg);
    }
  }
  
  .shead span:nth-child(4).active {
    animation: rotate 1s ease-out;
  }
  
  @keyframes rotate {
    20%, 80% {
      transform: rotateY(180deg);
    }
    
    100% {
      transform: rotateY(360deg);
    }
  }
  
  .shead span:nth-child(5).active {
    animation: toplong 1.5s linear;
  }
  
  @keyframes toplong {
    10%, 40% {
      transform: translateY(-48vh) scaleY(1);
    }
    
    90% {
      transform: translateY(-48vh) scaleY(4);
    }
  }
  .shead span:nth-child(6).active {
    animation: falling 2s ease-out;
    transform-origin: bottom center;
  }
  
  @keyframes falling {
    12% {
      transform: rotateX(240deg);
    }
    
    24% {
      transform: rotateX(150deg);
    }
    
    36% {
      transform: rotateX(200deg);
    }
    
    48% {
      transform: rotateX(175deg);
    }
    
    60%, 85% {
      transform: rotateX(180deg);
    }
    
    100% {
      transform: rotateX(0deg);
    }
  }
  
  .shead span:nth-child(7).active {
    animation: rotate 1s ease-out;
  }
  .shead span:nth-child(8).active {
    animation: toplong 1.5s linear;
  }
  .shead span:nth-child(9).active {
    animation: balance1 1.5s ease-out;
    transform-origin: bottom right;
  }
  @keyframes balance1{
    0%, 100% {
      transform: rotate(0deg);
    }
    30%, 60% {
      transform: rotate(45deg);
    }
  }

  .shead1 span {
    display: inline-block;
    }
    
    .shead1 span:nth-of-type(1) {
      animation-delay: 1.55s;
      }
    .shead1 span:nth-of-type(2) {
    animation-delay: 1.6s;
    }
    .shead1 span:nth-of-type(3) {
    animation-delay: 1.65s;
    }
    .shead1 span:nth-of-type(4) {
    animation-delay: 1.7s;
    }
    .shead1 span:nth-of-type(5) {
    animation-delay: 1.75s;
    }
    .shead1 span:nth-of-type(6) {
    animation-delay: 1.8s;
    }
    .shead1 span:nth-of-type(7) {
    animation-delay: 1.85s;
    }
    .shead1 span:nth-of-type(8) {
    animation-delay: 1.9s;
    }
    .shead1 span:nth-of-type(9) {
    animation-delay: 1.95s;
    }
    .shead1 span:nth-of-type(10) {
    animation-delay: 2s;
    }
    .shead1 span:nth-of-type(11) {
    animation-delay: 2.05s;
    }
    .shead1 span:nth-of-type(12) {
    animation-delay: 2.1s;
    }
    .shead1 span:nth-of-type(13) {
    animation-delay: 2.15s;
    }
    .shead1 span:nth-of-type(14) {
    animation-delay: 2.2s;
    }
    .shead1 span:nth-of-type(15) {
    animation-delay: 2.25s;
    }
    .shead1 span:nth-of-type(16) {
    animation-delay: 2.3s;
    }
    .shead1 span:nth-of-type(17) {
    animation-delay: 2.35s;
    }
    .shead1 span:nth-of-type(18) {
    animation-delay: 2.4s;
    }
    .shead1 span:nth-of-type(19) {
    animation-delay: 2.45s;
    }
    .shead1 span:nth-of-type(20) {
    animation-delay: 2.5s;
    }
    .shead1 span:nth-of-type(21) {
    animation-delay: 2.55s;
    }
    .shead1 span:nth-of-type(22) {
    animation-delay: 2.6s;
    }
    .shead1 span:nth-of-type(23) {
    animation-delay: 2.65s;
    }
    .shead1 span:nth-of-type(24) {
    animation-delay: 2.7s;
    }
    .shead1 span:nth-of-type(25) {
    animation-delay: 2.75s;
    }
    .shead1 span:nth-of-type(26) {
    animation-delay: 2.8s;
    }
    .shead1 span:nth-of-type(27) {
    animation-delay: 2.85s;
    }
    .shead1 span:nth-of-type(28) {
    animation-delay: 2.9s;
    }
    .shead1 span:nth-of-type(29) {
    animation-delay: 2.95s;
    }
    .shead1 span:nth-of-type(30) {
    animation-delay: 3s;
    }
    
    
    /* Animation One */
    
    .shead1 span {
    opacity: 0;
    transform: translate(-150px, -50px) rotate(-180deg) scale(3);
    animation: revolveScale 1.5s forwards;
    }
    
    @keyframes revolveScale {
    60% {
    transform: translate(20px, 20px) rotate(30deg) scale(.3);
    }
    
    100% {
    transform: translate(0) rotate(0) scale(1);
    opacity: 1;
    }
    }

    
.shead2 span {
  display: inline-block;
  }
  .shead2 span:nth-of-type(1) {
  animation-delay: 4s;
  }
  .shead2 span:nth-of-type(2) {
  animation-delay: 4.05s;
  }
  .shead2 span:nth-of-type(3) {
  animation-delay: 4.1s;
  }
  .shead2 span:nth-of-type(4) {
  animation-delay: 4.15s;
  }
  .shead2 span:nth-of-type(5) {
  animation-delay: 4.2s;
  }
  .shead2 span:nth-of-type(6) {
  animation-delay: 4.25s;
  }
  .shead2 span:nth-of-type(7) {
  animation-delay: 4.3s;
  }
  .shead2 span:nth-of-type(8) {
  animation-delay: 4.35s;
  }
  .shead2 span:nth-of-type(9) {
  animation-delay: 4.4s;
  }
  .shead2 span:nth-of-type(10) {
  animation-delay: 4.45s;
  }
  .shead2 span:nth-of-type(11) {
  animation-delay: 4.5s;
  }
  .shead2 span:nth-of-type(12) {
  animation-delay: 4.55s;
  }
  .shead2 span:nth-of-type(13) {
  animation-delay: 4.6s;
  }
  .shead2 span:nth-of-type(14) {
  animation-delay: 4.65s;
  }
  .shead2 span:nth-of-type(15) {
  animation-delay: 4.7s;
  }
  .shead2 span:nth-of-type(16) {
    animation-delay: 4.75s;
    }
  .shead2 span:nth-of-type(17) {
  animation-delay: 4.8s;
  }
  .shead2 span:nth-of-type(18) {
  animation-delay: 4.85s;
  }
  .shead2 span:nth-of-type(19) {
  animation-delay: 4.9s;
  }
  .shead2 span:nth-of-type(20) {
  animation-delay: 4.95s;
  }
  .shead2 span:nth-of-type(21) {
  animation-delay: 5s;
  }
  .shead2 span:nth-of-type(22) {
  animation-delay: 5.05s;
  }
  .shead2 span:nth-of-type(23) {
  animation-delay: 5.1s;
  }
  .shead2 span:nth-of-type(24) {
  animation-delay: 5.15s;
  }
  .shead2 span:nth-of-type(25) {
  animation-delay: 5.2s;
  }
  .shead2 span:nth-of-type(26) {
  animation-delay: 5.25s;
  }
  .shead2 span:nth-of-type(27) {
  animation-delay: 5.3s;
  }
  .shead2 span:nth-of-type(28) {
  animation-delay: 5.35s;
  }
  .shead2 span:nth-of-type(29) {
  animation-delay: 5.4s;
  }
  .shead2 span:nth-of-type(30) {
  animation-delay: 5.45s;
  }
  .shead2 span:nth-of-type(31) {
  animation-delay: 5.5s;
  }
  .shead2 span:nth-of-type(32) {
  animation-delay: 5.55s;
  }
  .shead2 span:nth-of-type(33) {
  animation-delay: 5.6s;
  }
  .shead2 span:nth-of-type(34) {
  animation-delay: 5.65s;
  }
  .shead2 span:nth-of-type(35) {
  animation-delay: 5.7s;
  }
  .shead2 span:nth-of-type(36) {
  animation-delay: 5.75s;
  }
  .shead2 span:nth-of-type(37) {
  animation-delay: 5.8s;
  }
  .shead2 span:nth-of-type(38) {
  animation-delay: 5.85s;
  }
  .shead2 span:nth-of-type(39) {
  animation-delay: 5.9s;
  }
  .shead2 span:nth-of-type(40) {
  animation-delay: 6.05s;
  }
  .shead2 span:nth-of-type(41) {
  animation-delay: 6.1s;
  }
  .shead2 span:nth-of-type(42) {
  animation-delay: 6.15s;
  }
  .shead2 span:nth-of-type(43) {
    animation-delay: 6.2s;
    }
    .shead2 span:nth-of-type(44) {
      animation-delay: 6.25s;
      }
      .shead2 span:nth-of-type(45) {
        animation-delay: 6.3s;
        }
        .shead2 span:nth-of-type(46) {
          animation-delay: 6.35s;
          }
          .shead2 span:nth-of-type(47) {
            animation-delay: 6.4s;
            }
            .shead2 span:nth-of-type(48) {
              animation-delay: 6.45s;
              }
  .shead2 span {
   
    opacity: 0;
    transform: translate(-150px, 0) scale(.5);
    animation: leftRight 1s forwards;
  }
  
  @keyframes leftRight {
    40% {
      transform: translate(50px, 0) scale(.7);
      opacity: 1;
      
    }
  
    60% {
      color: #0f0;
    }
  
    80% {
      transform: translate(0) scale(2);
      opacity: 0;
    }
  
    100% {
      transform: translate(0) scale(1);
      opacity: 1;
    }
  }