How to do a glitch image effect in css and html

Here is how to do a modern glitch effect on an image in html with css just like this one

The resources are below, including the images. You can use any png image but make sure you have 4 images in total and change their colors as i have done (RGB sliders). You can change variables to make the glitch behave differently from line 292 to 303 (left: & animation:)in the custom.css code.

index.html

<!DOCTYPE html>
<html>
<HEAD>
  <TITLE> Glitch image </TITLE>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8">
  <link href="custom.css" rel="stylesheet"/>
</HEAD>
<body>
  <div class="example-three">
    <img src="/images/doge.png">
    <img src="/images/doge2.png">
    <img src="/images/doge3.png">
    <img src="/images/doge4.png">
  </div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</body>
</html>

custom.css

@keyframes example-three-anim-1 {
  0% {
    clip: rect(249px, 250px, 112px, 0);
  }
  2.22222% {
    clip: rect(42px, 250px, 181px, 0);
  }
  4.44444% {
    clip: rect(193px, 250px, 147px, 0);
  }
  6.66667% {
    clip: rect(148px, 250px, 181px, 0);
  }
  8.88889% {
    clip: rect(213px, 250px, 191px, 0);
  }
  11.11111% {
    clip: rect(11px, 250px, 107px, 0);
  }
  13.33333% {
    clip: rect(216px, 250px, 41px, 0);
  }
  15.55556% {
    clip: rect(183px, 250px, 191px, 0);
  }
  17.77778% {
    clip: rect(155px, 250px, 230px, 0);
  }
  20% {
    clip: rect(220px, 250px, 48px, 0);
  }
  22.22222% {
    clip: rect(251px, 250px, 149px, 0);
  }
  24.44444% {
    clip: rect(159px, 250px, 25px, 0);
  }
  26.66667% {
    clip: rect(132px, 250px, 254px, 0);
  }
  28.88889% {
    clip: rect(77px, 250px, 159px, 0);
  }
  31.11111% {
    clip: rect(161px, 250px, 253px, 0);
  }
  33.33333% {
    clip: rect(42px, 250px, 188px, 0);
  }
  35.55556% {
    clip: rect(172px, 250px, 64px, 0);
  }
  37.77778% {
    clip: rect(57px, 250px, 90px, 0);
  }
  40% {
    clip: rect(135px, 250px, 111px, 0);
  }
  42.22222% {
    clip: rect(36px, 250px, 89px, 0);
  }
  44.44444% {
    clip: rect(94px, 250px, 94px, 0);
  }
  46.66667% {
    clip: rect(232px, 250px, 35px, 0);
  }
  48.88889% {
    clip: rect(162px, 250px, 197px, 0);
  }
  51.11111% {
    clip: rect(21px, 250px, 145px, 0);
  }
  53.33333% {
    clip: rect(99px, 250px, 123px, 0);
  }
  55.55556% {
    clip: rect(117px, 250px, 80px, 0);
  }
  57.77778% {
    clip: rect(138px, 250px, 46px, 0);
  }
  60% {
    clip: rect(195px, 250px, 194px, 0);
  }
  62.22222% {
    clip: rect(209px, 250px, 206px, 0);
  }
  64.44444% {
    clip: rect(81px, 250px, 89px, 0);
  }
  66.66667% {
    clip: rect(157px, 250px, 116px, 0);
  }
  68.88889% {
    clip: rect(60px, 250px, 120px, 0);
  }
  71.11111% {
    clip: rect(201px, 250px, 75px, 0);
  }
  73.33333% {
    clip: rect(62px, 250px, 143px, 0);
  }
  75.55556% {
    clip: rect(16px, 250px, 161px, 0);
  }
  77.77778% {
    clip: rect(126px, 250px, 108px, 0);
  }
  80% {
    clip: rect(193px, 250px, 7px, 0);
  }
  82.22222% {
    clip: rect(142px, 250px, 169px, 0);
  }
  84.44444% {
    clip: rect(238px, 250px, 80px, 0);
  }
  86.66667% {
    clip: rect(102px, 250px, 223px, 0);
  }
  88.88889% {
    clip: rect(174px, 250px, 143px, 0);
  }
  91.11111% {
    clip: rect(80px, 250px, 14px, 0);
  }
  93.33333% {
    clip: rect(109px, 250px, 79px, 0);
  }
  95.55556% {
    clip: rect(135px, 250px, 24px, 0);
  }
  97.77778% {
    clip: rect(225px, 250px, 81px, 0);
  }
  100% {
    clip: rect(22px, 250px, 119px, 0);
  }
}
@keyframes example-three-anim-2 {
  0% {
    clip: rect(99px, 250px, 191px, 0);
  }
  2.22222% {
    clip: rect(111px, 250px, 89px, 0);
  }
  4.44444% {
    clip: rect(211px, 250px, 159px, 0);
  }
  6.66667% {
    clip: rect(202px, 250px, 249px, 0);
  }
  8.88889% {
    clip: rect(30px, 250px, 221px, 0);
  }
  11.11111% {
    clip: rect(226px, 250px, 183px, 0);
  }
  13.33333% {
    clip: rect(32px, 250px, 79px, 0);
  }
  15.55556% {
    clip: rect(177px, 250px, 191px, 0);
  }
  17.77778% {
    clip: rect(237px, 250px, 143px, 0);
  }
  20% {
    clip: rect(113px, 250px, 222px, 0);
  }
  22.22222% {
    clip: rect(185px, 250px, 151px, 0);
  }
  24.44444% {
    clip: rect(216px, 250px, 44px, 0);
  }
  26.66667% {
    clip: rect(35px, 250px, 190px, 0);
  }
  28.88889% {
    clip: rect(166px, 250px, 80px, 0);
  }
  31.11111% {
    clip: rect(180px, 250px, 14px, 0);
  }
  33.33333% {
    clip: rect(47px, 250px, 105px, 0);
  }
  35.55556% {
    clip: rect(190px, 250px, 23px, 0);
  }
  37.77778% {
    clip: rect(131px, 250px, 6px, 0);
  }
  40% {
    clip: rect(34px, 250px, 146px, 0);
  }
  42.22222% {
    clip: rect(243px, 250px, 4px, 0);
  }
  44.44444% {
    clip: rect(158px, 250px, 20px, 0);
  }
  46.66667% {
    clip: rect(107px, 250px, 153px, 0);
  }
  48.88889% {
    clip: rect(22px, 250px, 193px, 0);
  }
  51.11111% {
    clip: rect(217px, 250px, 135px, 0);
  }
  53.33333% {
    clip: rect(136px, 250px, 17px, 0);
  }
  55.55556% {
    clip: rect(68px, 250px, 71px, 0);
  }
  57.77778% {
    clip: rect(105px, 250px, 42px, 0);
  }
  60% {
    clip: rect(145px, 250px, 68px, 0);
  }
  62.22222% {
    clip: rect(101px, 250px, 57px, 0);
  }
  64.44444% {
    clip: rect(59px, 250px, 47px, 0);
  }
  66.66667% {
    clip: rect(225px, 250px, 162px, 0);
  }
  68.88889% {
    clip: rect(145px, 250px, 99px, 0);
  }
  71.11111% {
    clip: rect(204px, 250px, 72px, 0);
  }
  73.33333% {
    clip: rect(134px, 250px, 212px, 0);
  }
  75.55556% {
    clip: rect(82px, 250px, 6px, 0);
  }
  77.77778% {
    clip: rect(47px, 250px, 212px, 0);
  }
  80% {
    clip: rect(109px, 250px, 111px, 0);
  }
  82.22222% {
    clip: rect(1px, 250px, 79px, 0);
  }
  84.44444% {
    clip: rect(11px, 250px, 233px, 0);
  }
  86.66667% {
    clip: rect(144px, 250px, 155px, 0);
  }
  88.88889% {
    clip: rect(52px, 250px, 42px, 0);
  }
  91.11111% {
    clip: rect(66px, 250px, 46px, 0);
  }
  93.33333% {
    clip: rect(61px, 250px, 86px, 0);
  }
  95.55556% {
    clip: rect(220px, 250px, 34px, 0);
  }
  97.77778% {
    clip: rect(63px, 250px, 31px, 0);
  }
  100% {
    clip: rect(220px, 250px, 62px, 0);
  }
}
.example-three > img {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.example-three > img:nth-child(2),
.example-three > img:nth-child(3),
.example-three > img:nth-child(4){
  clip: rect(0, 0, 0, 0);
}
.example-three > img:nth-child(2) {
  left: 51%;
  animation: example-three-anim-1 2s infinite linear alternate-reverse;
}
.example-three > img:nth-child(3) {
  left: 49%;
  animation: example-three-anim-2 3s infinite linear alternate-reverse;
}
.example-three > img:nth-child(4) {
  left: 50%;
  animation: example-three-anim-2 4s infinite linear alternate-reverse;
}
body {
  background: black;
  font-family: Sans-serif;
  padding: 20px;
      background-color: #121212;
    background-image: url(https://cpwp.b-cdn.net/foggy-birds.png);
}

.wrap {
  width: 400px;
  height: 300px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

img.center {
    display: block;
    margin: 0 auto;
}
#outPopUp {
  position: absolute;
  width: 300px;
  height: 200px;
  z-index: 15;
  top: 20%;
  left: 40%;
  margin: -100px 0 0 -150px;
}

Images:

doge
doge
doge2
doge2
doge3
doge3
doge4
doge4

Be creative and play around with different images and values in the custom.css to design your own glitchy distort image effect.