now-playing/assets/scss/5-modules/glitch.scss

//
// (TEXT) PARAMS
// =================
// 1. Namespace
// 2. Intensity
// 3. Text color
// 4. Background color (flat)
// 5. Highlight #1 color
// 6. Highlight #2 color
// 7. Width (px)
// 8. Height (px)
//

.glitch,
.glitch--hover:hover {
  @include textGlitch("glitchText", 50, $color-bg-head, red, blue, 9999, 100);
}


.glitch:nth-child(2)::after,
.glitch--hover:hover:nth-child(2)::after,
.glitch:nth-child(2)::before,
.glitch--hover:hover:nth-child(2)::before {
  animation-delay: .3s;
}

.coverGlitch {
  animation: coverTransform 2.5s steps(10) infinite, coverGlitch 3.2s infinite;
}

.coverGlitchSimpleHover:hover {
  animation: coverGlitch 3.2s infinite;
}

.coverGlitch-svgFilter {
  position: absolute;
  visibility: hidden;
  width: .1rem;
  height: .1rem;
}

@keyframes coverGlitch {
  45% {
    filter: none;
  }
  46% {
    filter: url(#dist-01);
  }
  47% {
    filter: url(#dist-02);
  }
  48% {
    filter: url(#dist-03);
  }
  50% {
    filter: none;
  }
  95% {
    filter: none;
  }
  96% {
    filter: url(#dist-02);
  }
  97% {
    filter: url(#dist-04);
  }
}
@keyframes coverTransform {
  0% {
    transform: translate(-1%, -1%) scale(1.005);
  }
  1% {
    transform: none;
  }
  88% {
    transform: none;
  }
  89% {
    transform: translate(1%, 2%) scale(1.005);
  }
  90% {
    transform: none;
  }
}