A little glitchy effect in Sass

distort.sass

@function randcol($steps: 2, $offset: 0)
  @return hsl(random($steps)*(360/$steps)+$offset,100,50)

@function randoff($spread: 4)
  @return #{-$spread+random()*2*$spread}px

@keyframes distort-julius
  @for $i from 0 to 10
    @if random()>0.3
      @for $p from $i*10 through $i*10+9
        #{$p}%
          @if random()>0.5
            text-shadow: randoff(6) randoff(1) randcol(3, 180)
          @else
            text-shadow: none
    @else
      #{$i*10}%
        text-shadow: none
      #{$i*10+9}%
        text-shadow: none

output.css

@keyframes distort-julius {
  0% {
    text-shadow: none; }
  9% {
    text-shadow: none; }
  10% {
    text-shadow: none; }
  19% {
    text-shadow: none; }
  20% {
    text-shadow: 5.5421px -0.26519px cyan; }
  21% {
    text-shadow: 1.41675px -0.78292px magenta; }
  22% {
    text-shadow: -1.79514px 0.93172px yellow; }
  23% {
    text-shadow: none; }
  24% {
    text-shadow: none; }
  25% {
    text-shadow: -5.64658px -0.75299px cyan; }
  26% {
    text-shadow: 1.2886px 0.9991px cyan; }
  27% {
    text-shadow: -4.87616px -0.73264px yellow; }
  28% {
    text-shadow: 4.67051px 0.95924px magenta; }
  29% {
    text-shadow: none; }
  30% {
    text-shadow: none; }
  39% {
    text-shadow: none; }
  40% {
    text-shadow: none; }
  41% {
    text-shadow: none; }
  42% {
    text-shadow: -2.01082px 0.8765px cyan; }
  43% {
    text-shadow: none; }
  44% {
    text-shadow: -3.99326px -0.49575px cyan; }
  45% {
    text-shadow: none; }
  46% {
    text-shadow: -0.66777px 0.48208px magenta; }
  47% {
    text-shadow: none; }
  48% {
    text-shadow: 2.15156px -0.73779px cyan; }
  49% {
    text-shadow: none; }
  50% {
    text-shadow: none; }
  59% {
    text-shadow: none; }
  60% {
    text-shadow: -3.83321px 0.59796px cyan; }
  61% {
    text-shadow: -5.92978px 0.16196px yellow; }
  62% {
    text-shadow: -1.63114px -0.37084px yellow; }
  63% {
    text-shadow: 2.733px -0.88524px cyan; }
  64% {
    text-shadow: 3.4312px -0.14427px cyan; }
  65% {
    text-shadow: none; }
  66% {
    text-shadow: 1.92854px 0.30075px magenta; }
  67% {
    text-shadow: none; }
  68% {
    text-shadow: none; }
  69% {
    text-shadow: 0.41494px 0.97568px magenta; }
  70% {
    text-shadow: none; }
  79% {
    text-shadow: none; }
  80% {
    text-shadow: none; }
  89% {
    text-shadow: none; }
  90% {
    text-shadow: none; }
  91% {
    text-shadow: none; }
  92% {
    text-shadow: none; }
  93% {
    text-shadow: -4.13846px 0.93345px yellow; }
  94% {
    text-shadow: none; }
  95% {
    text-shadow: -4.04855px -0.02242px cyan; }
  96% {
    text-shadow: 2.07304px 0.47815px yellow; }
  97% {
    text-shadow: -0.12745px 0.2297px magenta; }
  98% {
    text-shadow: 5.60709px -0.80918px magenta; }
  99% {
    text-shadow: none; } }