asimonson1125.github.io/react_OLD/src/assets/css/head.scss

.line {
  &:not(:first-child) {
    position: absolute;
    top: 0;
    left: 0;
  }
  
  @for $i from 1 through 10 {
    &:nth-child(#{$i}) {
      animation:
        clip 6000ms $i * -600ms linear infinite,
        glitch#{$i} 2500ms random(1000) * -1ms linear infinite;

      @keyframes glitch#{$i} {
        0% {
          transform: translateX(0);
        }
        96% {
          transform: translateX(0);
          color: #fff;
        }
        97% {
          transform: translateX(random(10) - 5px);
          color: #4E9A26;
        }
        98% {
          transform: translateX(random(10) - 5px);
          color: #AC1212;
        }
        99% {
          transform: translateX(random(10) - 5px);
          color: #fff;
        }
        100% {
          transform: translateX(0);
        }
      }
    }
  }
}

@keyframes clip {
  0% {
    clip-path: polygon(
      0 100%,
      100% 100%,
      100% 120%,
      0 120%
    );
  }
  
  100% {
    clip-path: polygon(
      0 -20%,
      100% -20%,
      100% 0%,
      0 0
    );
  }
}