.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 ); } }