glitchy_helloworld.scss

glitchy_helloworld.scss

body { 
   background-color: black;
   margin: 5rem 4rem;
   text-align: center;
   font-family: 'Poppins', 'sans-serif';
}
h1, h2 {   
   margin: 0;
   padding: 0;
   color: white;
   display: inline-block;
   font-size: 10rem;
   text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
}
h2 { font-size: 8rem; }
@for $j from 0 through 5 {
   h1:nth-child(0n + #{$j}), h2:nth-child(5n + #{$j}) {
     animation-name: animateGlithcy;
     animation-delay: #{$j/5}s;
     animation-duration: #{$j/2}s;
     animation-timing-function: linear;
     animation-direction: alternate-reverse;
     animation-iteration-count: infinite;
   }
}
@keyframes animateGlithcy
{
 0%
 {
  opacity: .1;
  background-position: 0 0;
  filter: hue-rotate(0deg);
 }
 10% { background-position: 5px 0; }
 20% { background-position: -5px 0; }
 30% { background-position: 15px 0; }
 40% { background-position: -5px 0; }
 50% { background-position: -25px 0; }
 60% { background-position: -50px 0; }
 70% { background-position: 0 -20px; }
 80% { background-position: -60px -20px; }
 81% { background-position: 0 0; }
 100% { opacity: 1; background-position: 0 0; filter: hue-rotate(360deg); }
}