body 
    {
      margin: 0;
      padding: 0;
    }
    
    .teks{
      position: absolute;
      top: 50%;
      left: 49%;
      z-index: 1;
      text-align: center;
      transform: translate(-50%,-50%) rotate(-20deg) skew(20deg);
      display: flex;
    }
    
    span
    {
      display: flex;
      margin-right: 10px;
    }
    
    h3
    {
      text-shadow: -1px 0 4px rgba(0,0,0,.2);
      color: #fff;
      position: relative;
      font-size: 2em;
      /* animation: teks 9s linear infinite; */
    }
    
    ul
    {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%) rotate(-20deg) skew(20deg);
      margin: 0;
      padding: 0;
      display: flex;
    }
    
    ul li 
    {
      position: relative;
      list-style: none;
      width: 4px;
      height: 240px;
      border-radius: 2px;
      background: #fff;
      box-shadow: -1px 0 2px rgba(0,0,0,.2);
      overflow: hidden;
      animation: animate 9.5s linear infinite;
    }
    
    ul li:nth-child(20n+1)
    {
      animation-delay: -0s;
    }
    
    ul li:nth-child(20n+2)
    {
      animation-delay: -0.5s;
    }
    
    ul li:nth-child(20n+3)
    {
      animation-delay: -1s;
    }
    
    ul li:nth-child(20n+4)
    {
      animation-delay: -1.5s;
    }
    
    ul li:nth-child(20n+5)
    {
      animation-delay: -2s;
    }
    
    ul li:nth-child(20n+6)
    {
      animation-delay: -2.5s;
    }
    
    ul li:nth-child(20n+7)
    {
      animation-delay: -3s;
    }
    
    ul li:nth-child(20n+8)
    {
      animation-delay: -3.5s;
    }
    
    ul li:nth-child(20n+9)
    {
      animation-delay: -4s;
    }
    
    ul li:nth-child(20n+10)
    {
      animation-delay: -4.5s;
    }
    
    ul li:nth-child(20n+11)
    {
      animation-delay: -5s;
    }
    
    ul li:nth-child(20n+12)
    {
      animation-delay: -5.5s;
    }
    
    ul li:nth-child(20n+13)
    {
      animation-delay: -6s;
    }
    
    ul li:nth-child(20n+14)
    {
      animation-delay: -6.5s;
    }
    
    ul li:nth-child(20n+15)
    {
      animation-delay: -7s;
    }
    
    ul li:nth-child(20n+16)
    {
      animation-delay: -7.5s;
    }
    
    ul li:nth-child(20n+17)
    {
      animation-delay: -8s;
    }
    
    ul li:nth-child(20n+18)
    {
      animation-delay: -8.5s;
    }
    
    ul li:nth-child(20n+19)
    {
      animation-delay: -9s;
    }
    
    ul li:nth-child(20n+20)
    {
      animation-delay: -9.5s;
    }
    
    
    
    ul li:before
    {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 50%;
      background: red;
    }
    
    @keyframes animate
    {
      0%
      {
        transform: translateY(0);
      }
      25%
      {
        transform: translateY(5px);
      }
      50%
      {
        transform: translateY(0);
      }
      75%
      {
        transform: translateY(-5px);
      }
      100%
      {
        transform: translateY(0);
      }
    }
    
    @keyframes teks
    {
      0%
      {
        transform: translateY(0);
      }
      25%
      {
        transform: translateY(5px);
      }
      50%
      {
        transform: translateY(0);
      }
      75%
      {
        transform: translateY(-5px);
      }
      100%
      {
        transform: translateY(0);
      }
    }
    
    @keyframes typing
    {
      100%
      {
        left: 100%;
      }
    }