<div class="wrap">
    <div class="glitch" data-text="GLITCH">GLITCH</div> 
</div>
@import "compass/css3";
@import url(https://fonts.googleapis.com/css?family=Exo+2:300,400,500,600);

body{
    font-family: 'Varela', sans-serif;
    //demo only, although x is probably always necessary
    overflow: hidden;
}

.wrap {
    background: black url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/glitch-bg.png) center center no-repeat;
    background-size: contain;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.glitch{
    font-family: 'Exo 2', sans-serif;
    font-weight: 600;
    color:white;
    font-size:100px;
    position:relative;
    margin:0 auto;
    text-shadow:
        0px -5px 10px rgba(255,255,255,1),
        0px 0px 5px rgba(255,255,255,0),
        0px 0px 10px rgba(255,255,255,0),
        0px 0px 15px rgba(255,255,255,0),
        0px 0px 20px rgba(255,255,255,0);
    animation:noise-anim-2 3s infinite linear alternate-reverse, shift 4s ease-in-out infinite alternate, blur 8s ease-in-out infinite alternate;
    @include transform(skewX(0deg));
}

@include keyframes(blur){
    0%,40%, 50%, 60%, 90%, 95%, 100%{
        text-shadow:
        0px -5px 10px rgba(255,255,255,1),
        0px 0px 5px rgba(255,255,255,0),
        0px 0px 10px rgba(255,255,255,0),
        2px 1px 15px rgba(100,240,255,0),
        0px 0px 20px rgba(255,255,255,0);
    }
    45%, 75% {
    text-shadow:
        0px -5px 10px rgba(255,255,255,1),
        0px 0px 5px rgba(255,255,255,1),
        0px 0px 10px rgba(255,255,255,1),
        2px 1px 15px rgba(100,240,255,1),
        0px 0px 20px rgba(255,255,255,1);
    }
    
    97.5% {
    text-shadow:
        0px -5px 10px rgba(255,255,255,0),
        0px 0px 5px rgba(255,255,255,0),
        0px 0px 10px rgba(255,255,255,0),
        2px 1px 4px rgba(255,100,100,1),
        0px 0px 20px rgba(255,255,255,0);
    }
}

.glitch:after{
    content:attr(data-text);
    position:absolute;
    left:3px;
    text-shadow: -1px 0 red;
    top:0;
    color: transparent;
    background: transparent;
    overflow:hidden;
    clip:rect(0,900px,0,0); 
    animation:noise-anim-2 3s infinite linear alternate-reverse, shift 4s ease-in-out infinite alternate;
    @include transform(skewX(0deg));
    z-index: -2;
    opacity: .7;
}

.glitch:before{
    content:attr(data-text);
    position:absolute;
    left:1px;
    text-shadow: -3px 0 cyan; 
    top:0;
    color: transparent;
    background: transparent;
    overflow: hidden;
    clip:rect(0,900px,0,0); 
    animation:noise-anim-2 3s infinite linear alternate-reverse, shift 4s ease-in-out infinite alternate;
    @include transform(skewX(0deg));
    z-index: -1;
    opacity: .8;
}

@keyframes noise-anim{
    $steps:20;
    @for $i from 0 through $steps{
        #{percentage($i*(1/$steps))}{
            clip:rect(random(100)+px,9999px,random(100)+px,0);
        }
    }
}

@keyframes noise-anim-2{
  $steps:20;
  @for $i from 0 through $steps{
    #{percentage($i*(1/$steps))}{
      clip:rect(random(100)+px,9999px,random(100)+px,0);
    }
  }
}

@include keyframes(shift){
  0%,40%, 44%, 58%, 61%, 65%,69%,73%,100%{
    @include transform(skewX(0deg))
  }
  41%{
    @include transform(skewX(10deg));
  }
  42%{
    @include transform(skewX(-10deg));
  }
  59%{
    @include transform(skewX(40deg) skewY(10deg));
  }
  60%{
    @include transform(skewX(-40deg) skewY(-10deg));
  }
  63%{
    @include transform(skewX(10deg) skewY(-5deg));
  }
  70%{
    @include transform(skewX(-50deg) skewY(-20deg));
  }
  71%{
    @include transform(skewX(10deg) skewY(-10deg));
  }
}
View Compiled

External CSS

  1. https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js