<section class="first"><div class="glitch" data-text="404">404</div>

<div class="glitch" data-text="GLITCH">GLITCH</div>

<div class="glitch" data-text="ANIMATION">ANIMATION</div>
</section>
<section class="second">
  <h4>Behind the scenes</h4>
  <div class="glitch" data-text="404">404</div>

<div class="glitch" data-text="GLITCH">GLITCH</div>

<div class="glitch" data-text="ANIMATION">ANIMATION</div>
</section>

@import 'https://fonts.googleapis.com/css?family=Monoton|Codystar:300';

*{
  margin: 0;
  box-sizing: border-box;
}


.first, .second{
  padding: 2rem;  
  height: 50vh;
  width: 100%;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
}
.first{
  background: #f1f2f3;
}
.second{
  background: #2c3e50;
}
.second h4{
  text-align: left;
  margin: -1rem 0 2rem;
  font-family: 'Codystar';
  color: red;
}

.glitch {
  position: relative;
  font-size: 50px;
  line-height: 50px;
  font-weight: bold;
  font-family: 'Monoton';
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  font-weight: bold;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch::before {
  left: 2px;
  text-shadow: -1px 0 red;
  background: #f1f2f3;
  animation: glitch-anim-2 2s infinite linear alternate-reverse;
}

.glitch::after {
  clip: rect(20px, 400px, 30px, 0);
  left: -2px;
  text-shadow: -1px 0 blue;
  background: #f1f2f3;
  animation: glitch-anim 2s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
  0% {
    clip: rect(10px, 400px, 15px, 0);
  }
  20% {
    clip: rect(400px, 400px, 41px, 0);
  }
  40% {
    clip: rect(25px, 400px, 26px, 0);
  }
  60% {
    clip: rect(10px, 400px, 15px, 0);
  }
  80% {
    clip: rect(26px, 400px, 29px, 0);
  }
  100% {
    clip: rect(40px, 400px, 45px, 0);
  }
}

@keyframes glitch-anim-2 {
  0% {
    clip: rect(30px, 400px, 40px, 0);
  }
  20% {
    clip: rect(26px, 400px, 28px, 0);
  }
  40% {
    clip: rect(15px, 400px, 100px, 0);
  }
  60% {
    clip: rect(40px, 400px, 45px, 0);
  }
  80% {
    clip: rect(10px, 400px, 18px, 0);
  }
  100% {
    clip: rect(40px, 400px, 50px, 0);
  }
}