Share the post "10+ CSS Text Glitch Effect Examples"

Share the post "10+ CSS Text Glitch Effect Examples"

Share the post "10+ CSS Text Glitch Effect Examples"

Share the post "10+ CSS Text Glitch Effect Examples"

10+ CSS Text Glitch Effect Examples

💙 CSS / By

This post contains a total of 10+ CSS Text Glitch Effect Examples with Source Code. All these Text Glitch Effects are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

10+ CSS 3D Text Effect Examples
CSS 3D Text Effects
10+ CSS Text Shadow Effect Examples
CSS Text Shadow Effects
10+ CSS Typing Text Effect Examples
CSS Typing Text Effects
11+ CSS Text Animation Examples
CSS Text Animations
12+ CSS Glow Text Effect Examples
CSS Glow Text Effects
7+ CSS Text Effect Examples
CSS Text Effects
7+ JavaScript Text Glitch Effect Examples
JavaScript Text Glitch Effects
9+ CSS box-shadow Examples
CSS box-shadows

CSS Text Glitch Effect Examples

1. Text Glitch

Made by CamelCasingGod. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
}
body, html {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: black;
}
.content{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.content .text{
  position: relative;
  color: #fff;
  font-weight: 700;
  font-size: 45px;
  transform: scale(2);
  padding: 30px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.content .text:before,
.content .text:after {
  padding: 30px;
  color: white;
  content: attr(data-text);
  position: absolute;
  width: 100%;
  height: 100%;
  background: black;
  overflow: hidden;
  top: 0;
}
.content .text:before{
  left: 3px;
  text-shadow: -2px 0 red;
  animation: glitch-1 2s linear infinite reverse;
}
.content .text:after{
  left: -3px;
  text-shadow: -2px 0 blue;
  animation: glitch-2 2s linear infinite reverse;
}
@keyframes glitch-1 {
  0% {
    clip: rect(132px, auto, 101px, 30px);
  }
  5% {
    clip: rect(17px, auto, 94px, 30px);
  }
  10% {
    clip: rect(40px, auto, 66px, 30px);
  }
  15% {
    clip: rect(87px, auto, 82px, 30px);
  }
  20% {
    clip: rect(137px, auto, 61px, 30px);
  }
  25% {
    clip: rect(34px, auto, 14px, 30px);
  }
  30% {
    clip: rect(133px, auto, 74px, 30px);
  }
  35% {
    clip: rect(76px, auto, 107px, 30px);
  }
  40% {
    clip: rect(59px, auto, 130px, 30px);
  }
  45% {
    clip: rect(29px, auto, 84px, 30px);
  }
  50% {
    clip: rect(22px, auto, 67px, 30px);
  }
  55% {
    clip: rect(67px, auto, 62px, 30px);
  }
  60% {
    clip: rect(10px, auto, 105px, 30px);
  }
  65% {
    clip: rect(78px, auto, 115px, 30px);
  }
  70% {
    clip: rect(105px, auto, 13px, 30px);
  }
  75% {
    clip: rect(15px, auto, 75px, 30px);
  }
  80% {
    clip: rect(66px, auto, 39px, 30px);
  }
  85% {
    clip: rect(133px, auto, 73px, 30px);
  }
  90% {
    clip: rect(36px, auto, 128px, 30px);
  }
  95% {
    clip: rect(68px, auto, 103px, 30px);
  }
  100% {
    clip: rect(14px, auto, 100px, 30px);
  }
}
@keyframes glitch-2 {
  0% {
    clip: rect(129px, auto, 36px, 30px);
  }
  5% {
    clip: rect(36px, auto, 4px, 30px);
  }
  10% {
    clip: rect(85px, auto, 66px, 30px);
  }
  15% {
    clip: rect(91px, auto, 91px, 30px);
  }
  20% {
    clip: rect(148px, auto, 138px, 30px);
  }
  25% {
    clip: rect(38px, auto, 122px, 30px);
  }
  30% {
    clip: rect(69px, auto, 54px, 30px);
  }
  35% {
    clip: rect(98px, auto, 71px, 30px);
  }
  40% {
    clip: rect(146px, auto, 34px, 30px);
  }
  45% {
    clip: rect(134px, auto, 43px, 30px);
  }
  50% {
    clip: rect(102px, auto, 80px, 30px);
  }
  55% {
    clip: rect(119px, auto, 44px, 30px);
  }
  60% {
    clip: rect(106px, auto, 99px, 30px);
  }
  65% {
    clip: rect(141px, auto, 74px, 30px);
  }
  70% {
    clip: rect(20px, auto, 78px, 30px);
  }
  75% {
    clip: rect(133px, auto, 79px, 30px);
  }
  80% {
    clip: rect(78px, auto, 52px, 30px);
  }
  85% {
    clip: rect(35px, auto, 39px, 30px);
  }
  90% {
    clip: rect(67px, auto, 70px, 30px);
  }
  95% {
    clip: rect(71px, auto, 103px, 30px);
  }
  100% {
    clip: rect(83px, auto, 40px, 30px);
  }
}
</style>
</head>
  <body>
    <div class="content">
      <h1 class="text" data-text="Ameya">
Ameya</h1>
</div>
</body>
</html>

2. Dab on em

Made by XING LEI. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Oswald:700" rel="stylesheet">
<style>
body {
  background-color: #111;
}
.container {
  width: 340px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.font,
.main,
.glitch:before,
.glitch:after {
  font-family: 'Oswald', sans-serif;
  font-size: 12rem;
  line-height: 11rem;
  text-align: center;
}
.text,
.glitch {
  width: 100%;
  height: 100%;
}
.main {
  position: relative;
  color: rgba(255,255,255,0.2);
  background-image: url("http://i.giphy.com/3o6Mb4ZTsllteGKWVq.gif");
  background-size: cover;
  background-position: center center;
  -webkit-background-clip: text;
  -webkit-animation: noise-3 1.8s ease-out infinite;
          animation: noise-3 1.8s ease-out infinite;
}
.glitch {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.glitch:before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(255,0,0,0.5);
  transform: scale(0.95) translateX(2px);
  -webkit-animation: noise-2 2s ease-out infinite;
          animation: noise-2 2s ease-out infinite;
}
.glitch:after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(0,0,255,0.5);
  transform: scale(0.95) translateX(2px);
  -webkit-animation: noise 3s ease-in infinite;
          animation: noise 3s ease-in infinite;
}
@-webkit-keyframes noise {
  0%, 9.5%, 10.2%, 70%, 72%, 89%, 90%, 100% {
    transform: scaleY(1) translateX(2px);
    z-index: 0;
  }
  10% {
    transform: scaleX(1.2) translateX(5px) translateY(10px);
    z-index: 0;
  }
  71.5% {
    transform: scaleX(1.25) translateX(-20px);
    z-index: 1;
  }
}
@keyframes noise {
  0%, 9.5%, 10.2%, 70%, 72%, 89%, 90%, 100% {
    transform: scaleY(1) translateX(2px);
    z-index: 0;
  }
  10% {
    transform: scaleX(1.2) translateX(5px) translateY(10px);
    z-index: 0;
  }
  71.5% {
    transform: scaleX(1.25) translateX(-20px);
    z-index: 1;
  }
}
@-webkit-keyframes noise-2 {
  0%, 9.5%, 10.2%, 70%, 72%, 89%, 90%, 100% {
    transform: scaleY(1) translateX(-2px);
    z-index: 0;
  }
  10% {
    transform: scaleX(1.2) translateX(-5px);
    z-index: 0;
  }
  71.5% {
    transform: scaleX(1.3) translateX(30px);
    z-index: 1;
  }
}
@keyframes noise-2 {
  0%, 9.5%, 10.2%, 70%, 72%, 89%, 90%, 100% {
    transform: scaleY(1) translateX(-2px);
    z-index: 0;
  }
  10% {
    transform: scaleX(1.2) translateX(-5px);
    z-index: 0;
  }
  71.5% {
    transform: scaleX(1.3) translateX(30px);
    z-index: 1;
  }
}
@-webkit-keyframes noise-3 {
  0%, 9.5%, 10.2%, 71%, 72%, 100% {
    transform: scaleY(1);
  }
  10% {
    transform: scaleX(1.1);
  }
  71.8% {
    transform: scaleX(1.2);
  }
}
@keyframes noise-3 {
  0%, 9.5%, 10.2%, 71%, 72%, 100% {
    transform: scaleY(1);
  }
  10% {
    transform: scaleX(1.1);
  }
  71.8% {
    transform: scaleX(1.2);
  }
}
</style>
</head>
<body>
  <div class="container">
  <div class="glitch" data-text="DAB ON 'EM"></div>
  <div class="main">DAB ON 'EM</div>
</div>
</body>
</html>

3. Psycho Glitch (CSS variables & @keyframes)

Made by Alex Nozdriukhin. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title>CodePen - Psycho Glitch (CSS variables &amp; @keyframes)</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@import url("https://fonts.googleapis.com/css?family=Bungee+Shade");
:root {
  --f-size: 15;
  --f-unit: 1vmin;
  --f: calc(var(--f-size) * var(--f-unit));
  --bg: #181717;
}

*, *::after, *::before {
  box-sizing: border-box;
}

body {
  font-family: "Bungee Shade", cursive;
  font-size: var(--f);
  background-color: var(--bg);
  display: flex;
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
}

p {
  flex: 1;
  line-height: 0.75;
  margin: auto;
  color: #1af0dc;
  text-align: center;
  transform: scaleX(var(--scale, 1));
  animation: glitch-p 11s infinite alternate;
}
p::before, p::after {
  --top: 0;
  --left: 0;
  --v-height: 30%;
  --n-tenth: calc(var(--f-size) * .1 * var(--top));
  --t-cut: calc(var(--n-tenth) / var(--f-size) * 100%);
  --b-cut: calc(var(--t-cut) + var(--v-height));
  content: attr(data-text);
  position: absolute;
  width: 100%;
  left: 0;
  text-align: center;
  transform: translateX(calc(var(--left) * 100%));
  filter: drop-shadow(0 0 transparent);
  text-shadow: calc(var(--left) * -3em) 0 0.02em lime, calc(var(--left) * -6em) 0 0.02em #ff00e1;
  background-color: var(--bg);
  clip-path: polygon(0% var(--t-cut), 100% var(--t-cut), 100% var(--b-cut), 0% var(--b-cut));
}
p::before {
  animation: glitch-b 1.7s infinite alternate-reverse;
}
p::after {
  animation: glitch-a 3.1s infinite alternate;
}

@keyframes glitch-p {
  17% {
    --scale: .87;
  }
  31% {
    --scale: 1.1;
  }
  37% {
    --scale: 1.3;
  }
  47% {
    --scale: .91;
  }
  87% {
    --scale: 1;
  }
}
@keyframes glitch-a {
  10%, 30%, 50%, 70%, 90% {
    --top: 0;
    --left: 0;
  }
  0% {
    --v-height: 15%;
  }
  20% {
    --left: .005;
  }
  40% {
    --left: .01;
    --v-height: 20%;
    --top: 3;
  }
  60% {
    --left: .03;
    --v-height: 25%;
    --top: 6;
  }
  80% {
    --left: .07;
    --v-height: 5%;
    --top: 8;
  }
  100% {
    --left: .083;
    --v-height: 30%;
    --top: 1;
  }
}
@keyframes glitch-b {
  10%, 30%, 50%, 70%, 90% {
    --top: 0;
    --left: 0;
  }
  0% {
    --v-height: 15%;
    --top: 10;
  }
  20% {
    --left: -.005;
  }
  40% {
    --left: -.01;
    --v-height: 17%;
    --top: 3;
  }
  60% {
    --left: -.03;
    --v-height: 35%;
    --top: 6;
  }
  80% {
    --left: -.07;
    --v-height: 5%;
    --top: 8;
  }
  100% {
    --left: -.083;
    --v-height: 30%;
    --top: 1;
  }
}
</style>
</head>
<body>
  <p data-text="PSYCHO">PSYCHO</p>
</body>
</html>

4. Glitch text effect

Made by SHM. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
@import url('https://fonts.googleapis.com/css?family=Archivo+Black');
html,
body {
  height: 100%;
}
body {
  background: #ccc;
  font-family: 'Archivo Black', sans-serif;
}
.glitch-wrapper {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.glitch {
  color: black;
  font-size: 150px;
  text-transform: upercase;
  position: relative;
  display: inline-block;
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.glitch::before {
  left: 2px;
  text-shadow: -2px 0 #49FC00;
  clip: rect(24px, 550px, 90px, 0);
  -webkit-animation: glitch-anim-2 2.5s infinite linear alternate-reverse;
          animation: glitch-anim-2 2.5s infinite linear alternate-reverse;
}
.glitch::after {
  left: -2px;
  text-shadow: -2px 0 #b300fc;
  clip: rect(85px, 550px, 140px, 0);
  -webkit-animation: glitch-anim 2.5s infinite linear alternate-reverse;
          animation: glitch-anim 2.5s infinite linear alternate-reverse;
}
@-webkit-keyframes glitch-anim {
  0% {
    clip: rect(110px, 9999999px, 74px, 0);
  }
  4.16666667% {
    clip: rect(135px, 9999999px, 143px, 0);
  }
  8.33333333% {
    clip: rect(100px, 9999999px, 100px, 0);
  }
  12.5% {
    clip: rect(38px, 9999999px, 24px, 0);
  }
  16.66666667% {
    clip: rect(125px, 9999999px, 83px, 0);
  }
  20.83333333% {
    clip: rect(149px, 9999999px, 63px, 0);
  }
  25% {
    clip: rect(12px, 9999999px, 104px, 0);
  }
  29.16666667% {
    clip: rect(68px, 9999999px, 7px, 0);
  }
  33.33333333% {
    clip: rect(77px, 9999999px, 20px, 0);
  }
  37.5% {
    clip: rect(99px, 9999999px, 6px, 0);
  }
  41.66666667% {
    clip: rect(27px, 9999999px, 99px, 0);
  }
  45.83333333% {
    clip: rect(58px, 9999999px, 107px, 0);
  }
  50% {
    clip: rect(108px, 9999999px, 77px, 0);
  }
  54.16666667% {
    clip: rect(58px, 9999999px, 87px, 0);
  }
  58.33333333% {
    clip: rect(142px, 9999999px, 112px, 0);
  }
  62.5% {
    clip: rect(124px, 9999999px, 125px, 0);
  }
  66.66666667% {
    clip: rect(61px, 9999999px, 53px, 0);
  }
  70.83333333% {
    clip: rect(117px, 9999999px, 74px, 0);
  }
  75% {
    clip: rect(21px, 9999999px, 74px, 0);
  }
  79.16666667% {
    clip: rect(117px, 9999999px, 70px, 0);
  }
  83.33333333% {
    clip: rect(87px, 9999999px, 122px, 0);
  }
  87.5% {
    clip: rect(95px, 9999999px, 9px, 0);
  }
  91.66666667% {
    clip: rect(121px, 9999999px, 75px, 0);
  }
  95.83333333% {
    clip: rect(121px, 9999999px, 115px, 0);
  }
  100% {
    clip: rect(101px, 9999999px, 72px, 0);
  }
}
@-o-keyframes glitch-anim {
  0% {
    clip: rect(110px, 9999999px, 74px, 0);
  }
  4.16666667% {
    clip: rect(135px, 9999999px, 143px, 0);
  }
  8.33333333% {
    clip: rect(100px, 9999999px, 100px, 0);
  }
  12.5% {
    clip: rect(38px, 9999999px, 24px, 0);
  }
  16.66666667% {
    clip: rect(125px, 9999999px, 83px, 0);
  }
  20.83333333% {
    clip: rect(149px, 9999999px, 63px, 0);
  }
  25% {
    clip: rect(12px, 9999999px, 104px, 0);
  }
  29.16666667% {
    clip: rect(68px, 9999999px, 7px, 0);
  }
  33.33333333% {
    clip: rect(77px, 9999999px, 20px, 0);
  }
  37.5% {
    clip: rect(99px, 9999999px, 6px, 0);
  }
  41.66666667% {
    clip: rect(27px, 9999999px, 99px, 0);
  }
  45.83333333% {
    clip: rect(58px, 9999999px, 107px, 0);
  }
  50% {
    clip: rect(108px, 9999999px, 77px, 0);
  }
  54.16666667% {
    clip: rect(58px, 9999999px, 87px, 0);
  }
  58.33333333% {
    clip: rect(142px, 9999999px, 112px, 0);
  }
  62.5% {
    clip: rect(124px, 9999999px, 125px, 0);
  }
  66.66666667% {
    clip: rect(61px, 9999999px, 53px, 0);
  }
  70.83333333% {
    clip: rect(117px, 9999999px, 74px, 0);
  }
  75% {
    clip: rect(21px, 9999999px, 74px, 0);
  }
  79.16666667% {
    clip: rect(117px, 9999999px, 70px, 0);
  }
  83.33333333% {
    clip: rect(87px, 9999999px, 122px, 0);
  }
  87.5% {
    clip: rect(95px, 9999999px, 9px, 0);
  }
  91.66666667% {
    clip: rect(121px, 9999999px, 75px, 0);
  }
  95.83333333% {
    clip: rect(121px, 9999999px, 115px, 0);
  }
  100% {
    clip: rect(101px, 9999999px, 72px, 0);
  }
}
@-moz-keyframes glitch-anim {
  0% {
    clip: rect(110px, 9999999px, 74px, 0);
  }
  4.16666667% {
    clip: rect(135px, 9999999px, 143px, 0);
  }
  8.33333333% {
    clip: rect(100px, 9999999px, 100px, 0);
  }
  12.5% {
    clip: rect(38px, 9999999px, 24px, 0);
  }
  16.66666667% {
    clip: rect(125px, 9999999px, 83px, 0);
  }
  20.83333333% {
    clip: rect(149px, 9999999px, 63px, 0);
  }
  25% {
    clip: rect(12px, 9999999px, 104px, 0);
  }
  29.16666667% {
    clip: rect(68px, 9999999px, 7px, 0);
  }
  33.33333333% {
    clip: rect(77px, 9999999px, 20px, 0);
  }
  37.5% {
    clip: rect(99px, 9999999px, 6px, 0);
  }
  41.66666667% {
    clip: rect(27px, 9999999px, 99px, 0);
  }
  45.83333333% {
    clip: rect(58px, 9999999px, 107px, 0);
  }
  50% {
    clip: rect(108px, 9999999px, 77px, 0);
  }
  54.16666667% {
    clip: rect(58px, 9999999px, 87px, 0);
  }
  58.33333333% {
    clip: rect(142px, 9999999px, 112px, 0);
  }
  62.5% {
    clip: rect(124px, 9999999px, 125px, 0);
  }
  66.66666667% {
    clip: rect(61px, 9999999px, 53px, 0);
  }
  70.83333333% {
    clip: rect(117px, 9999999px, 74px, 0);
  }
  75% {
    clip: rect(21px, 9999999px, 74px, 0);
  }
  79.16666667% {
    clip: rect(117px, 9999999px, 70px, 0);
  }
  83.33333333% {
    clip: rect(87px, 9999999px, 122px, 0);
  }
  87.5% {
    clip: rect(95px, 9999999px, 9px, 0);
  }
  91.66666667% {
    clip: rect(121px, 9999999px, 75px, 0);
  }
  95.83333333% {
    clip: rect(121px, 9999999px, 115px, 0);
  }
  100% {
    clip: rect(101px, 9999999px, 72px, 0);
  }
}
@keyframes glitch-anim {
  0% {
    clip: rect(110px, 9999999px, 74px, 0);
  }
  4.16666667% {
    clip: rect(135px, 9999999px, 143px, 0);
  }
  8.33333333% {
    clip: rect(100px, 9999999px, 100px, 0);
  }
  12.5% {
    clip: rect(38px, 9999999px, 24px, 0);
  }
  16.66666667% {
    clip: rect(125px, 9999999px, 83px, 0);
  }
  20.83333333% {
    clip: rect(149px, 9999999px, 63px, 0);
  }
  25% {
    clip: rect(12px, 9999999px, 104px, 0);
  }
  29.16666667% {
    clip: rect(68px, 9999999px, 7px, 0);
  }
  33.33333333% {
    clip: rect(77px, 9999999px, 20px, 0);
  }
  37.5% {
    clip: rect(99px, 9999999px, 6px, 0);
  }
  41.66666667% {
    clip: rect(27px, 9999999px, 99px, 0);
  }
  45.83333333% {
    clip: rect(58px, 9999999px, 107px, 0);
  }
  50% {
    clip: rect(108px, 9999999px, 77px, 0);
  }
  54.16666667% {
    clip: rect(58px, 9999999px, 87px, 0);
  }
  58.33333333% {
    clip: rect(142px, 9999999px, 112px, 0);
  }
  62.5% {
    clip: rect(124px, 9999999px, 125px, 0);
  }
  66.66666667% {
    clip: rect(61px, 9999999px, 53px, 0);
  }
  70.83333333% {
    clip: rect(117px, 9999999px, 74px, 0);
  }
  75% {
    clip: rect(21px, 9999999px, 74px, 0);
  }
  79.16666667% {
    clip: rect(117px, 9999999px, 70px, 0);
  }
  83.33333333% {
    clip: rect(87px, 9999999px, 122px, 0);
  }
  87.5% {
    clip: rect(95px, 9999999px, 9px, 0);
  }
  91.66666667% {
    clip: rect(121px, 9999999px, 75px, 0);
  }
  95.83333333% {
    clip: rect(121px, 9999999px, 115px, 0);
  }
  100% {
    clip: rect(101px, 9999999px, 72px, 0);
  }
}
@-webkit-keyframes glitch-anim-2 {
  6.66666667% {
    clip: rect(76px, 9999999px, 132px, 0);
  }
  10% {
    clip: rect(13px, 9999999px, 82px, 0);
  }
  13.33333333% {
    clip: rect(97px, 9999999px, 2px, 0);
  }
  16.66666667% {
    clip: rect(1px, 9999999px, 147px, 0);
  }
  20% {
    clip: rect(113px, 9999999px, 124px, 0);
  }
  23.33333333% {
    clip: rect(132px, 9999999px, 130px, 0);
  }
  26.66666667% {
    clip: rect(120px, 9999999px, 32px, 0);
  }
  30% {
    clip: rect(2px, 9999999px, 10px, 0);
  }
  33.33333333% {
    clip: rect(76px, 9999999px, 46px, 0);
  }
  36.66666667% {
    clip: rect(140px, 9999999px, 79px, 0);
  }
  40% {
    clip: rect(37px, 9999999px, 67px, 0);
  }
  43.33333333% {
    clip: rect(133px, 9999999px, 95px, 0);
  }
  46.66666667% {
    clip: rect(6px, 9999999px, 16px, 0);
  }
  50% {
    clip: rect(98px, 9999999px, 123px, 0);
  }
  53.33333333% {
    clip: rect(42px, 9999999px, 88px, 0);
  }
  56.66666667% {
    clip: rect(77px, 9999999px, 110px, 0);
  }
  60% {
    clip: rect(22px, 9999999px, 145px, 0);
  }
  63.33333333% {
    clip: rect(47px, 9999999px, 75px, 0);
  }
  66.66666667% {
    clip: rect(109px, 9999999px, 135px, 0);
  }
  70% {
    clip: rect(118px, 9999999px, 40px, 0);
  }
  73.33333333% {
    clip: rect(74px, 9999999px, 141px, 0);
  }
  76.66666667% {
    clip: rect(59px, 9999999px, 100px, 0);
  }
  80% {
    clip: rect(14px, 9999999px, 32px, 0);
  }
  83.33333333% {
    clip: rect(22px, 9999999px, 28px, 0);
  }
  86.66666667% {
    clip: rect(106px, 9999999px, 74px, 0);
  }
  90% {
    clip: rect(33px, 9999999px, 97px, 0);
  }
  93.33333333% {
    clip: rect(94px, 9999999px, 29px, 0);
  }
  96.66666667% {
    clip: rect(108px, 9999999px, 87px, 0);
  }
  100% {
    clip: rect(5px, 9999999px, 14px, 0);
  }
}
@-o-keyframes glitch-anim-2 {
  6.66666667% {
    clip: rect(76px, 9999999px, 132px, 0);
  }
  10% {
    clip: rect(13px, 9999999px, 82px, 0);
  }
  13.33333333% {
    clip: rect(97px, 9999999px, 2px, 0);
  }
  16.66666667% {
    clip: rect(1px, 9999999px, 147px, 0);
  }
  20% {
    clip: rect(113px, 9999999px, 124px, 0);
  }
  23.33333333% {
    clip: rect(132px, 9999999px, 130px, 0);
  }
  26.66666667% {
    clip: rect(120px, 9999999px, 32px, 0);
  }
  30% {
    clip: rect(2px, 9999999px, 10px, 0);
  }
  33.33333333% {
    clip: rect(76px, 9999999px, 46px, 0);
  }
  36.66666667% {
    clip: rect(140px, 9999999px, 79px, 0);
  }
  40% {
    clip: rect(37px, 9999999px, 67px, 0);
  }
  43.33333333% {
    clip: rect(133px, 9999999px, 95px, 0);
  }
  46.66666667% {
    clip: rect(6px, 9999999px, 16px, 0);
  }
  50% {
    clip: rect(98px, 9999999px, 123px, 0);
  }
  53.33333333% {
    clip: rect(42px, 9999999px, 88px, 0);
  }
  56.66666667% {
    clip: rect(77px, 9999999px, 110px, 0);
  }
  60% {
    clip: rect(22px, 9999999px, 145px, 0);
  }
  63.33333333% {
    clip: rect(47px, 9999999px, 75px, 0);
  }
  66.66666667% {
    clip: rect(109px, 9999999px, 135px, 0);
  }
  70% {
    clip: rect(118px, 9999999px, 40px, 0);
  }
  73.33333333% {
    clip: rect(74px, 9999999px, 141px, 0);
  }
  76.66666667% {
    clip: rect(59px, 9999999px, 100px, 0);
  }
  80% {
    clip: rect(14px, 9999999px, 32px, 0);
  }
  83.33333333% {
    clip: rect(22px, 9999999px, 28px, 0);
  }
  86.66666667% {
    clip: rect(106px, 9999999px, 74px, 0);
  }
  90% {
    clip: rect(33px, 9999999px, 97px, 0);
  }
  93.33333333% {
    clip: rect(94px, 9999999px, 29px, 0);
  }
  96.66666667% {
    clip: rect(108px, 9999999px, 87px, 0);
  }
  100% {
    clip: rect(5px, 9999999px, 14px, 0);
  }
}
@-moz-keyframes glitch-anim-2 {
  6.66666667% {
    clip: rect(76px, 9999999px, 132px, 0);
  }
  10% {
    clip: rect(13px, 9999999px, 82px, 0);
  }
  13.33333333% {
    clip: rect(97px, 9999999px, 2px, 0);
  }
  16.66666667% {
    clip: rect(1px, 9999999px, 147px, 0);
  }
  20% {
    clip: rect(113px, 9999999px, 124px, 0);
  }
  23.33333333% {
    clip: rect(132px, 9999999px, 130px, 0);
  }
  26.66666667% {
    clip: rect(120px, 9999999px, 32px, 0);
  }
  30% {
    clip: rect(2px, 9999999px, 10px, 0);
  }
  33.33333333% {
    clip: rect(76px, 9999999px, 46px, 0);
  }
  36.66666667% {
    clip: rect(140px, 9999999px, 79px, 0);
  }
  40% {
    clip: rect(37px, 9999999px, 67px, 0);
  }
  43.33333333% {
    clip: rect(133px, 9999999px, 95px, 0);
  }
  46.66666667% {
    clip: rect(6px, 9999999px, 16px, 0);
  }
  50% {
    clip: rect(98px, 9999999px, 123px, 0);
  }
  53.33333333% {
    clip: rect(42px, 9999999px, 88px, 0);
  }
  56.66666667% {
    clip: rect(77px, 9999999px, 110px, 0);
  }
  60% {
    clip: rect(22px, 9999999px, 145px, 0);
  }
  63.33333333% {
    clip: rect(47px, 9999999px, 75px, 0);
  }
  66.66666667% {
    clip: rect(109px, 9999999px, 135px, 0);
  }
  70% {
    clip: rect(118px, 9999999px, 40px, 0);
  }
  73.33333333% {
    clip: rect(74px, 9999999px, 141px, 0);
  }
  76.66666667% {
    clip: rect(59px, 9999999px, 100px, 0);
  }
  80% {
    clip: rect(14px, 9999999px, 32px, 0);
  }
  83.33333333% {
    clip: rect(22px, 9999999px, 28px, 0);
  }
  86.66666667% {
    clip: rect(106px, 9999999px, 74px, 0);
  }
  90% {
    clip: rect(33px, 9999999px, 97px, 0);
  }
  93.33333333% {
    clip: rect(94px, 9999999px, 29px, 0);
  }
  96.66666667% {
    clip: rect(108px, 9999999px, 87px, 0);
  }
  100% {
    clip: rect(5px, 9999999px, 14px, 0);
  }
}
@keyframes glitch-anim-2 {
  6.66666667% {
    clip: rect(76px, 9999999px, 132px, 0);
  }
  10% {
    clip: rect(13px, 9999999px, 82px, 0);
  }
  13.33333333% {
    clip: rect(97px, 9999999px, 2px, 0);
  }
  16.66666667% {
    clip: rect(1px, 9999999px, 147px, 0);
  }
  20% {
    clip: rect(113px, 9999999px, 124px, 0);
  }
  23.33333333% {
    clip: rect(132px, 9999999px, 130px, 0);
  }
  26.66666667% {
    clip: rect(120px, 9999999px, 32px, 0);
  }
  30% {
    clip: rect(2px, 9999999px, 10px, 0);
  }
  33.33333333% {
    clip: rect(76px, 9999999px, 46px, 0);
  }
  36.66666667% {
    clip: rect(140px, 9999999px, 79px, 0);
  }
  40% {
    clip: rect(37px, 9999999px, 67px, 0);
  }
  43.33333333% {
    clip: rect(133px, 9999999px, 95px, 0);
  }
  46.66666667% {
    clip: rect(6px, 9999999px, 16px, 0);
  }
  50% {
    clip: rect(98px, 9999999px, 123px, 0);
  }
  53.33333333% {
    clip: rect(42px, 9999999px, 88px, 0);
  }
  56.66666667% {
    clip: rect(77px, 9999999px, 110px, 0);
  }
  60% {
    clip: rect(22px, 9999999px, 145px, 0);
  }
  63.33333333% {
    clip: rect(47px, 9999999px, 75px, 0);
  }
  66.66666667% {
    clip: rect(109px, 9999999px, 135px, 0);
  }
  70% {
    clip: rect(118px, 9999999px, 40px, 0);
  }
  73.33333333% {
    clip: rect(74px, 9999999px, 141px, 0);
  }
  76.66666667% {
    clip: rect(59px, 9999999px, 100px, 0);
  }
  80% {
    clip: rect(14px, 9999999px, 32px, 0);
  }
  83.33333333% {
    clip: rect(22px, 9999999px, 28px, 0);
  }
  86.66666667% {
    clip: rect(106px, 9999999px, 74px, 0);
  }
  90% {
    clip: rect(33px, 9999999px, 97px, 0);
  }
  93.33333333% {
    clip: rect(94px, 9999999px, 29px, 0);
  }
  96.66666667% {
    clip: rect(108px, 9999999px, 87px, 0);
  }
  100% {
    clip: rect(5px, 9999999px, 14px, 0);
  }
}
</style>
</head>
<body>
  <div class="glitch-wrapper">
  <div class="glitch" data-text="GLITCH">GLITCH</div>
</div>
</body>
</html>

5. Glitch Text

Made by Zoite. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Medula+One" rel="stylesheet"> 
<style>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: black;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Medula One", sans-serif;
  font-size: 3em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

span:first-child {
  margin-right: 20px;
}

span:last-child {
  color: black;
  background-color: black;
  animation: fadeWhite 4s forwards;
  animation-delay: 2s;
  position: relative;
}
span:last-child:after {
  content: "deepend";
  position: absolute;
  left: 2px;
  top: 2px;
  clip: rect(0, 900px, 0, 0);
  background-color: black;
  color: white;
  animation: glitch 3s infinite alternate-reverse;
  animation-delay: 4s;
}
span:last-child:before {
  content: "deepend";
  position: absolute;
  left: -2px;
  top: -2px;
  clip: rect(0, 900px, 0, 0);
  background-color: black;
  color: white;
  animation: glitch 3s infinite alternate-reverse;
  animation-delay: 4s;
}

@keyframes fadeWhite {
  100% {
    color: white;
  }
}
@keyframes glitch {
  0% {
    clip: rect(32px, 9999px, 35px, 0);
  }
  5% {
    clip: rect(62px, 9999px, 65px, 0);
  }
  10% {
    clip: rect(82px, 9999px, 87px, 0);
  }
  15% {
    clip: rect(37px, 9999px, 13px, 0);
  }
  20% {
    clip: rect(91px, 9999px, 69px, 0);
  }
  25% {
    clip: rect(2px, 9999px, 96px, 0);
  }
  30% {
    clip: rect(64px, 9999px, 83px, 0);
  }
  35% {
    clip: rect(49px, 9999px, 68px, 0);
  }
  40% {
    clip: rect(90px, 9999px, 29px, 0);
  }
  45% {
    clip: rect(74px, 9999px, 22px, 0);
  }
  50% {
    clip: rect(50px, 9999px, 43px, 0);
  }
  55% {
    clip: rect(67px, 9999px, 76px, 0);
  }
  60% {
    clip: rect(6px, 9999px, 35px, 0);
  }
  65% {
    clip: rect(77px, 9999px, 45px, 0);
  }
  70% {
    clip: rect(56px, 9999px, 57px, 0);
  }
  75% {
    clip: rect(58px, 9999px, 95px, 0);
  }
  80% {
    clip: rect(13px, 9999px, 85px, 0);
  }
  85% {
    clip: rect(61px, 9999px, 44px, 0);
  }
  90% {
    clip: rect(12px, 9999px, 96px, 0);
  }
  95% {
    clip: rect(23px, 9999px, 60px, 0);
  }
  100% {
    clip: rect(18px, 9999px, 59px, 0);
  }
}
</style>
</head>
<body>
  <span>the</span><span>deepend</span>
</body>
</html>

6. CSS Glitched Text

Made by Zagora. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
.glitch {
  color: black;
  font-size: 100px;
  position: relative;
  width: 400px;
  margin: 0 auto;
}

@keyframes noise-anim {
  0% {
    clip: rect(30px, 9999px, 53px, 0);
  }
  5% {
    clip: rect(60px, 9999px, 2px, 0);
  }
  10% {
    clip: rect(20px, 9999px, 95px, 0);
  }
  15% {
    clip: rect(50px, 9999px, 26px, 0);
  }
  20% {
    clip: rect(30px, 9999px, 42px, 0);
  }
  25% {
    clip: rect(2px, 9999px, 72px, 0);
  }
  30% {
    clip: rect(33px, 9999px, 9px, 0);
  }
  35% {
    clip: rect(91px, 9999px, 28px, 0);
  }
  40% {
    clip: rect(84px, 9999px, 55px, 0);
  }
  45% {
    clip: rect(60px, 9999px, 79px, 0);
  }
  50% {
    clip: rect(46px, 9999px, 4px, 0);
  }
  55% {
    clip: rect(3px, 9999px, 16px, 0);
  }
  60% {
    clip: rect(8px, 9999px, 23px, 0);
  }
  65% {
    clip: rect(20px, 9999px, 93px, 0);
  }
  70% {
    clip: rect(89px, 9999px, 47px, 0);
  }
  75% {
    clip: rect(13px, 9999px, 89px, 0);
  }
  80% {
    clip: rect(76px, 9999px, 15px, 0);
  }
  85% {
    clip: rect(91px, 9999px, 79px, 0);
  }
  90% {
    clip: rect(53px, 9999px, 49px, 0);
  }
  95% {
    clip: rect(96px, 9999px, 36px, 0);
  }
  100% {
    clip: rect(31px, 9999px, 46px, 0);
  }
}
.glitch:after {
  content: attr(data-text);
  position: absolute;
  left: 2px;
  text-shadow: -1px 0 red;
  top: 0;
  color: white;
  background: black;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim 2s infinite linear alternate-reverse;
}

@keyframes noise-anim-2 {
  0% {
    clip: rect(88px, 9999px, 40px, 0);
  }
  5% {
    clip: rect(35px, 9999px, 19px, 0);
  }
  10% {
    clip: rect(24px, 9999px, 79px, 0);
  }
  15% {
    clip: rect(18px, 9999px, 49px, 0);
  }
  20% {
    clip: rect(81px, 9999px, 7px, 0);
  }
  25% {
    clip: rect(38px, 9999px, 19px, 0);
  }
  30% {
    clip: rect(94px, 9999px, 17px, 0);
  }
  35% {
    clip: rect(34px, 9999px, 100px, 0);
  }
  40% {
    clip: rect(80px, 9999px, 11px, 0);
  }
  45% {
    clip: rect(100px, 9999px, 18px, 0);
  }
  50% {
    clip: rect(70px, 9999px, 39px, 0);
  }
  55% {
    clip: rect(55px, 9999px, 34px, 0);
  }
  60% {
    clip: rect(48px, 9999px, 22px, 0);
  }
  65% {
    clip: rect(66px, 9999px, 2px, 0);
  }
  70% {
    clip: rect(77px, 9999px, 82px, 0);
  }
  75% {
    clip: rect(60px, 9999px, 56px, 0);
  }
  80% {
    clip: rect(55px, 9999px, 53px, 0);
  }
  85% {
    clip: rect(45px, 9999px, 39px, 0);
  }
  90% {
    clip: rect(95px, 9999px, 10px, 0);
  }
  95% {
    clip: rect(26px, 9999px, 3px, 0);
  }
  100% {
    clip: rect(97px, 9999px, 28px, 0);
  }
}
.glitch:before {
  content: attr(data-text);
  position: absolute;
  left: -2px;
  text-shadow: 1px 0 blue;
  top: 0;
  color: white;
  background: black;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim-2 3s infinite linear alternate-reverse;
}
</style>
</head>
<body>
  <div class="glitch" data-text="GLITCH">GLITCH</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

7. Hover Glitch effect

Made by Sibi. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
html, body {
  height: 100%;
}

.container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

body {
  background: #2B0059;
}

.glitch {
  font-size: 130px;
  font-family: sans-serif;
  font-weight: 700;
  transform: translate(0);
  position: relative;
  margin: 0;
  text-decoration: none;
  color: #fff;
  cursor: pointer;
}
.glitch:before, .glitch:after {
  display: block;
  content: attr(data-glitch);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.glitch:after {
  color: #f0f;
  z-index: -2;
}
.glitch:before {
  color: #0ff;
  z-index: -1;
}
.glitch:hover:before {
  -webkit-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
          animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
  opacity: 1;
}
.glitch:hover:after {
  animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
  opacity: 1;
}

.glitch-btn {
  position: relative;
  border: 3px solid #fff;
  background: transparent;
  color: #fff;
  padding: 10px 20px;
  margin: 20px;
  font-size: 30px;
  z-index: 0;
}
.glitch-btn span {
  position: relative;
  display: inline-block;
  transform: translate(0, 0);
  transition: transform 0.1s ease;
}
.glitch-btn:before, .glitch-btn:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
}
.glitch-btn:after {
  border: 3px solid #f0f;
  z-index: -2;
}
.glitch-btn:before {
  border: 3px solid #0ff;
  z-index: -1;
}
.glitch-btn:hover {
  border: 3px solid transparent;
  cursor: pointer;
}
.glitch-btn:hover:before {
  -webkit-animation: glitch-btn 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
          animation: glitch-btn 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
  opacity: 1;
}
.glitch-btn:hover:after {
  animation: glitch-btn 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
  opacity: 1;
}
.glitch-btn:hover span {
  position: relative;
  transform: translate(2px, 2px);
}

@-webkit-keyframes glitch {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translate(-5px, 5px);
  }
  40% {
    transform: translate(-5px, -5px);
  }
  60% {
    transform: translate(5px, 5px);
  }
  80% {
    transform: translate(5px, -5px);
  }
  to {
    transform: translate(0);
  }
}

@keyframes glitch {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translate(-5px, 5px);
  }
  40% {
    transform: translate(-5px, -5px);
  }
  60% {
    transform: translate(5px, 5px);
  }
  80% {
    transform: translate(5px, -5px);
  }
  to {
    transform: translate(0);
  }
}
@-webkit-keyframes glitch-btn {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translate(-2px, 2px);
  }
  40% {
    transform: translate(-2px, -2px);
  }
  60% {
    transform: translate(2px, 2px);
  }
  80% {
    transform: translate(2px, -2px);
  }
  to {
    transform: translate(0);
  }
}
@keyframes glitch-btn {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translate(-2px, 2px);
  }
  40% {
    transform: translate(-2px, -2px);
  }
  60% {
    transform: translate(2px, 2px);
  }
  80% {
    transform: translate(2px, -2px);
  }
  to {
    transform: translate(0);
  }
}
</style>
</head>
<body>
  <div class="container">
  <!-- Glitchy Text-->
  <div class="glitch" data-glitch="#13ALLACK">#13ALLACK</div>
  <!-- Glitchy Button-->
  <button class="glitch-btn"><span data-glitch="GLitcHY">GLitcHY</span></button>
</div>
</body>
</html>

8. Glitchy Text Button

Made by Dan. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Inconsolata'>  
<style>
html, body {
  height: 100%;
  width: 100%;
}

html {
  display: table;
}

body {
  font-family: "Inconsolata";
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  background-color: #666;
}

a {
  text-decoration: none;
  color: white;
}

.glitch-btn {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  display: inline-block;
  position: relative;
  font-size: 36px;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
  z-index: 1;
  -webkit-transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.glitch-btn:hover:before {
  background: white;
  -webkit-transform: translateY(-50%) scaleY(1.5);
  transform: translateY(-50%) scaleY(1.5);
}

.glitch-btn:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -18px;
  background: rgba(255, 255, 255, 0.1);
  width: 100%;
  height: 80%;
  padding: 0 15px;
  z-index: -1;
  -webkit-transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.glitch-btn:after {
  content: "";
  position: absolute;
  top: 50%;
  left: -18px;
  background: transparent;
  width: 100%;
  height: 100%;
  padding: 0 15px;
}

.glitch-btn .mask {
  position: absolute;
  -webkit-backface-visibility: hidden;
  height: 20%;
  width: 100%;
  overflow: hidden;
  display: none;
}

.glitch-btn .mask span {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 100%;
}

.glitch-btn .mask:nth-child(6) {
  top: 100%;
}

.glitch-btn .mask:nth-child(6) span {
  top: -500%;
}

.glitch-btn .mask:nth-child(5) {
  top: 80%;
}

.glitch-btn .mask:nth-child(5) span {
  top: -400%;
}

.glitch-btn .mask:nth-child(4) {
  top: 60%;
}

.glitch-btn .mask:nth-child(4) span {
  top: -300%;
}

.glitch-btn .mask:nth-child(3) {
  top: 40%;
}

.glitch-btn .mask:nth-child(3) span {
  top: -200%;
}

.glitch-btn .mask:nth-child(2) {
  top: 20%;
}

.glitch-btn .mask:nth-child(2) span {
  top: -100%;
}

.glitch-btn:hover .label {
  -webkit-animation: fade-in 0.8s both;
  animation: fade-in 0.8s both;
}

.glitch-btn:hover .mask {
  display: block;
}

.glitch-btn:hover .mask:nth-child(6) {
  -webkit-animation: jitter-20-25-8 0.3s both;
  animation: jitter-20-25-8 0.3s both;
}

.glitch-btn:hover .mask:nth-child(5) {
  -webkit-animation: jitter-20-24-8 0.3s both;
  animation: jitter-20-24-8 0.3s both;
}

.glitch-btn:hover .mask:nth-child(4) {
  -webkit-animation: jitter-20-23-8 0.3s both;
  animation: jitter-20-23-8 0.3s both;
}

.glitch-btn:hover .mask:nth-child(3) {
  -webkit-animation: jitter-20-22-8 0.3s both;
  animation: jitter-20-22-8 0.3s both;
}

.glitch-btn:hover .mask:nth-child(2) {
  -webkit-animation: jitter-20-21-8 0.3s both;
  animation: jitter-20-21-8 0.3s both;
}

@keyframes jitter-20-20-8 {
  100% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
  95% {
    -webkit-transform: translate(0.3px, 0.2px);
    transform: translate(0.3px, 0.2px);
  }
  90% {
    -webkit-transform: translate(-0.7px, 0.2px);
    transform: translate(-0.7px, 0.2px);
  }
  85% {
    -webkit-transform: translate(-0.75px, 0.3px);
    transform: translate(-0.75px, 0.3px);
  }
  80% {
    -webkit-transform: translate(-0.2px, -0.2px);
    transform: translate(-0.2px, -0.2px);
  }
  75% {
    -webkit-transform: translate(-2.25px, -0.75px);
    transform: translate(-2.25px, -0.75px);
  }
  70% {
    -webkit-transform: translate(-2.1px, 0.6px);
    transform: translate(-2.1px, 0.6px);
  }
  65% {
    -webkit-transform: translate(2.8px, -0.35px);
    transform: translate(2.8px, -0.35px);
  }
  60% {
    -webkit-transform: translate(2.4px, -0.4px);
    transform: translate(2.4px, -0.4px);
  }
  55% {
    -webkit-transform: translate(-3.6px, 1.8px);
    transform: translate(-3.6px, 1.8px);
  }
  50% {
    -webkit-transform: translate(1.5px, 1.5px);
    transform: translate(1.5px, 1.5px);
  }
  45% {
    -webkit-transform: translate(3.85px, 1.65px);
    transform: translate(3.85px, 1.65px);
  }
  40% {
    -webkit-transform: translate(4.2px, 0px);
    transform: translate(4.2px, 0px);
  }
  35% {
    -webkit-transform: translate(-5.85px, -1.95px);
    transform: translate(-5.85px, -1.95px);
  }
  30% {
    -webkit-transform: translate(-5.6px, 2.8px);
    transform: translate(-5.6px, 2.8px);
  }
  25% {
    -webkit-transform: translate(5.25px, 0px);
    transform: translate(5.25px, 0px);
  }
  20% {
    -webkit-transform: translate(0.8px, 0.8px);
    transform: translate(0.8px, 0.8px);
  }
  15% {
    -webkit-transform: translate(-5.1px, 2.55px);
    transform: translate(-5.1px, 2.55px);
  }
  10% {
    -webkit-transform: translate(0.9px, 1.8px);
    transform: translate(0.9px, 1.8px);
  }
  5% {
    -webkit-transform: translate(-5.7px, 0.95px);
    transform: translate(-5.7px, 0.95px);
  }
}
@keyframes jitter-20-21-8 {
  100% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
  95% {
    -webkit-transform: translate(-0.475px, -0.05px);
    transform: translate(-0.475px, -0.05px);
  }
  90% {
    -webkit-transform: translate(0.75px, 0.3px);
    transform: translate(0.75px, 0.3px);
  }
  85% {
    -webkit-transform: translate(-1.425px, -0.45px);
    transform: translate(-1.425px, -0.45px);
  }
  80% {
    -webkit-transform: translate(-1.5px, 0.4px);
    transform: translate(-1.5px, 0.4px);
  }
  75% {
    -webkit-transform: translate(0.875px, 1px);
    transform: translate(0.875px, 1px);
  }
  70% {
    -webkit-transform: translate(-0.75px, 0.9px);
    transform: translate(-0.75px, 0.9px);
  }
  65% {
    -webkit-transform: translate(-1.225px, 0.35px);
    transform: translate(-1.225px, 0.35px);
  }
  60% {
    -webkit-transform: translate(2.2px, -1.2px);
    transform: translate(2.2px, -1.2px);
  }
  55% {
    -webkit-transform: translate(2.925px, 0.9px);
    transform: translate(2.925px, 0.9px);
  }
  50% {
    -webkit-transform: translate(-2.75px, 0px);
    transform: translate(-2.75px, 0px);
  }
  45% {
    -webkit-transform: translate(-4.675px, -0.55px);
    transform: translate(-4.675px, -0.55px);
  }
  40% {
    -webkit-transform: translate(4.5px, -1.2px);
    transform: translate(4.5px, -1.2px);
  }
  35% {
    -webkit-transform: translate(4.875px, 0px);
    transform: translate(4.875px, 0px);
  }
  30% {
    -webkit-transform: translate(-1.75px, -0.7px);
    transform: translate(-1.75px, -0.7px);
  }
  25% {
    -webkit-transform: translate(-0.375px, 0.75px);
    transform: translate(-0.375px, 0.75px);
  }
  20% {
    -webkit-transform: translate(0.4px, 0px);
    transform: translate(0.4px, 0px);
  }
  15% {
    -webkit-transform: translate(-3.825px, 2.55px);
    transform: translate(-3.825px, 2.55px);
  }
  10% {
    -webkit-transform: translate(-2.25px, -2.7px);
    transform: translate(-2.25px, -2.7px);
  }
  5% {
    -webkit-transform: translate(6.175px, 3.8px);
    transform: translate(6.175px, 3.8px);
  }
}
@keyframes jitter-20-22-8 {
  100% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
  95% {
    -webkit-transform: translate(-0.15px, -0.05px);
    transform: translate(-0.15px, -0.05px);
  }
  90% {
    -webkit-transform: translate(1px, 0.2px);
    transform: translate(1px, 0.2px);
  }
  85% {
    -webkit-transform: translate(1.35px, 0.45px);
    transform: translate(1.35px, 0.45px);
  }
  80% {
    -webkit-transform: translate(1.6px, -0.2px);
    transform: translate(1.6px, -0.2px);
  }
  75% {
    -webkit-transform: translate(-2.25px, -0.75px);
    transform: translate(-2.25px, -0.75px);
  }
  70% {
    -webkit-transform: translate(-1.5px, 0.3px);
    transform: translate(-1.5px, 0.3px);
  }
  65% {
    -webkit-transform: translate(3.15px, -0.35px);
    transform: translate(3.15px, -0.35px);
  }
  60% {
    -webkit-transform: translate(-0.4px, -0.8px);
    transform: translate(-0.4px, -0.8px);
  }
  55% {
    -webkit-transform: translate(-2.7px, -0.45px);
    transform: translate(-2.7px, -0.45px);
  }
  50% {
    -webkit-transform: translate(-2.5px, 2px);
    transform: translate(-2.5px, 2px);
  }
  45% {
    -webkit-transform: translate(4.4px, 0px);
    transform: translate(4.4px, 0px);
  }
  40% {
    -webkit-transform: translate(4.8px, -1.2px);
    transform: translate(4.8px, -1.2px);
  }
  35% {
    -webkit-transform: translate(-4.55px, -1.95px);
    transform: translate(-4.55px, -1.95px);
  }
  30% {
    -webkit-transform: translate(7px, 2.8px);
    transform: translate(7px, 2.8px);
  }
  25% {
    -webkit-transform: translate(-7.5px, -2.25px);
    transform: translate(-7.5px, -2.25px);
  }
  20% {
    -webkit-transform: translate(-5.6px, 2.4px);
    transform: translate(-5.6px, 2.4px);
  }
  15% {
    -webkit-transform: translate(9.35px, -1.7px);
    transform: translate(9.35px, -1.7px);
  }
  10% {
    -webkit-transform: translate(-6.3px, 0px);
    transform: translate(-6.3px, 0px);
  }
  5% {
    -webkit-transform: translate(4.75px, 0.95px);
    transform: translate(4.75px, 0.95px);
  }
}
@keyframes jitter-20-23-8 {
  100% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
  95% {
    -webkit-transform: translate(-0.525px, 0.05px);
    transform: translate(-0.525px, 0.05px);
  }
  90% {
    -webkit-transform: translate(0.45px, 0.4px);
    transform: translate(0.45px, 0.4px);
  }
  85% {
    -webkit-transform: translate(-1.275px, 0.15px);
    transform: translate(-1.275px, 0.15px);
  }
  80% {
    -webkit-transform: translate(1.3px, -0.6px);
    transform: translate(1.3px, -0.6px);
  }
  75% {
    -webkit-transform: translate(-0.875px, 0.25px);
    transform: translate(-0.875px, 0.25px);
  }
  70% {
    -webkit-transform: translate(3.45px, 0.9px);
    transform: translate(3.45px, 0.9px);
  }
  65% {
    -webkit-transform: translate(-2.625px, 1.4px);
    transform: translate(-2.625px, 1.4px);
  }
  60% {
    -webkit-transform: translate(-3.4px, 0.8px);
    transform: translate(-3.4px, 0.8px);
  }
  55% {
    -webkit-transform: translate(-2.475px, 0.45px);
    transform: translate(-2.475px, 0.45px);
  }
  50% {
    -webkit-transform: translate(-3.75px, 1px);
    transform: translate(-3.75px, 1px);
  }
  45% {
    -webkit-transform: translate(2.475px, 1.1px);
    transform: translate(2.475px, 1.1px);
  }
  40% {
    -webkit-transform: translate(-0.3px, 1.2px);
    transform: translate(-0.3px, 1.2px);
  }
  35% {
    -webkit-transform: translate(7.475px, 2.6px);
    transform: translate(7.475px, 2.6px);
  }
  30% {
    -webkit-transform: translate(3.85px, 0.7px);
    transform: translate(3.85px, 0.7px);
  }
  25% {
    -webkit-transform: translate(-0.375px, -0.75px);
    transform: translate(-0.375px, -0.75px);
  }
  20% {
    -webkit-transform: translate(9.2px, 1.6px);
    transform: translate(9.2px, 1.6px);
  }
  15% {
    -webkit-transform: translate(4.675px, -1.7px);
    transform: translate(4.675px, -1.7px);
  }
  10% {
    -webkit-transform: translate(3.15px, -2.7px);
    transform: translate(3.15px, -2.7px);
  }
  5% {
    -webkit-transform: translate(5.225px, 3.8px);
    transform: translate(5.225px, 3.8px);
  }
}
@keyframes jitter-20-24-8 {
  100% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
  95% {
    -webkit-transform: translate(0.35px, 0.1px);
    transform: translate(0.35px, 0.1px);
  }
  90% {
    -webkit-transform: translate(1px, -0.3px);
    transform: translate(1px, -0.3px);
  }
  85% {
    -webkit-transform: translate(1.2px, 0.45px);
    transform: translate(1.2px, 0.45px);
  }
  80% {
    -webkit-transform: translate(2.4px, 0px);
    transform: translate(2.4px, 0px);
  }
  75% {
    -webkit-transform: translate(1.25px, 0.5px);
    transform: translate(1.25px, 0.5px);
  }
  70% {
    -webkit-transform: translate(-2.1px, 0px);
    transform: translate(-2.1px, 0px);
  }
  65% {
    -webkit-transform: translate(2.8px, -1.05px);
    transform: translate(2.8px, -1.05px);
  }
  60% {
    -webkit-transform: translate(2.8px, 0.4px);
    transform: translate(2.8px, 0.4px);
  }
  55% {
    -webkit-transform: translate(0.9px, -0.45px);
    transform: translate(0.9px, -0.45px);
  }
  50% {
    -webkit-transform: translate(-1.5px, -0.5px);
    transform: translate(-1.5px, -0.5px);
  }
  45% {
    -webkit-transform: translate(4.4px, -1.65px);
    transform: translate(4.4px, -1.65px);
  }
  40% {
    -webkit-transform: translate(4.8px, 0.6px);
    transform: translate(4.8px, 0.6px);
  }
  35% {
    -webkit-transform: translate(5.2px, 1.95px);
    transform: translate(5.2px, 1.95px);
  }
  30% {
    -webkit-transform: translate(1.4px, -1.4px);
    transform: translate(1.4px, -1.4px);
  }
  25% {
    -webkit-transform: translate(-6px, -2.25px);
    transform: translate(-6px, -2.25px);
  }
  20% {
    -webkit-transform: translate(-8.8px, 0.8px);
    transform: translate(-8.8px, 0.8px);
  }
  15% {
    -webkit-transform: translate(0.85px, -1.7px);
    transform: translate(0.85px, -1.7px);
  }
  10% {
    -webkit-transform: translate(9px, -2.7px);
    transform: translate(9px, -2.7px);
  }
  5% {
    -webkit-transform: translate(9.5px, 2.85px);
    transform: translate(9.5px, 2.85px);
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style>
</head>
<body>
  <div class="glitch-btn">
  <div class="label">I'm Glitchy</div>
  <div class="mask"><span>I'm Glitchy</span></div>
  <div class="mask"><span>I'm Glitchy</span></div>
  <div class="mask"><span>I'm Glitchy</span></div>
  <div class="mask"><span>I'm Glitchy</span></div>
  <div class="mask"><span>I'm Glitchy</span></div>
</div>
</body>
</html>

9. CSS Hover Glitch Effect

Made by Alexey Kiselev. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
* {
 margin: 0;
 padding: 0;
}

body {
 height: 100vh;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 background-color: #000;
}

.text {
 padding: 10px;
 color: #fefefe;
}

.text--glitch {
 font-family: sans-serif;
 font-size: 90px;
 text-transform: uppercase;
 font-weight: bold;
}

.text--hover {
 font-family: serif;
 font-size: 60px;
}

.text--glitch,
.text--hover:hover{
 animation: animate .5s linear infinite;
}

@keyframes animate {
 0%, 100% {
  text-shadow: -1.5px -1.5px 0 #0ff, 2px 2px 0 #f00;
 }
 25% {
  text-shadow: 2px 2px 0 #0ff, -1.5px -1.5px 0 #f00;
 }
 50% {
  text-shadow: 1.5px -2px 0 #0ff, -2px 1.5px 0 #f00;
 }
 75% {
  text-shadow: -2px 1.5px 0 #0ff, 1.5px -2px 0 #f00;
 }
}
</style>
</head>
<body>
  <p class='text text--glitch'>Glitch</p>
<p class='text text--hover'>Hover me</p>
</body>
</html>

10. CSS Text Glitch effect

Made by Alexander Erlandsson. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
.glitch-text {
  font-size: 5em;
  color: white;
  position: relative;
}
@-webkit-keyframes textGlitch-anim-1 {
  0% {
    clip: rect(1px, 450px, 26px, 0);
  }
  5.8823529412% {
    clip: rect(43px, 450px, 7px, 0);
  }
  11.7647058824% {
    clip: rect(56px, 450px, 65px, 0);
  }
  17.6470588235% {
    clip: rect(39px, 450px, 82px, 0);
  }
  23.5294117647% {
    clip: rect(51px, 450px, 71px, 0);
  }
  29.4117647059% {
    clip: rect(104px, 450px, 29px, 0);
  }
  35.2941176471% {
    clip: rect(60px, 450px, 32px, 0);
  }
  41.1764705882% {
    clip: rect(9px, 450px, 96px, 0);
  }
  47.0588235294% {
    clip: rect(71px, 450px, 67px, 0);
  }
  52.9411764706% {
    clip: rect(48px, 450px, 96px, 0);
  }
  58.8235294118% {
    clip: rect(99px, 450px, 114px, 0);
  }
  64.7058823529% {
    clip: rect(95px, 450px, 63px, 0);
  }
  70.5882352941% {
    clip: rect(48px, 450px, 59px, 0);
  }
  76.4705882353% {
    clip: rect(10px, 450px, 7px, 0);
  }
  82.3529411765% {
    clip: rect(80px, 450px, 103px, 0);
  }
  88.2352941176% {
    clip: rect(82px, 450px, 12px, 0);
  }
  94.1176470588% {
    clip: rect(83px, 450px, 12px, 0);
  }
  100% {
    clip: rect(103px, 450px, 50px, 0);
  }
}
@keyframes textGlitch-anim-1 {
  0% {
    clip: rect(1px, 450px, 26px, 0);
  }
  5.8823529412% {
    clip: rect(43px, 450px, 7px, 0);
  }
  11.7647058824% {
    clip: rect(56px, 450px, 65px, 0);
  }
  17.6470588235% {
    clip: rect(39px, 450px, 82px, 0);
  }
  23.5294117647% {
    clip: rect(51px, 450px, 71px, 0);
  }
  29.4117647059% {
    clip: rect(104px, 450px, 29px, 0);
  }
  35.2941176471% {
    clip: rect(60px, 450px, 32px, 0);
  }
  41.1764705882% {
    clip: rect(9px, 450px, 96px, 0);
  }
  47.0588235294% {
    clip: rect(71px, 450px, 67px, 0);
  }
  52.9411764706% {
    clip: rect(48px, 450px, 96px, 0);
  }
  58.8235294118% {
    clip: rect(99px, 450px, 114px, 0);
  }
  64.7058823529% {
    clip: rect(95px, 450px, 63px, 0);
  }
  70.5882352941% {
    clip: rect(48px, 450px, 59px, 0);
  }
  76.4705882353% {
    clip: rect(10px, 450px, 7px, 0);
  }
  82.3529411765% {
    clip: rect(80px, 450px, 103px, 0);
  }
  88.2352941176% {
    clip: rect(82px, 450px, 12px, 0);
  }
  94.1176470588% {
    clip: rect(83px, 450px, 12px, 0);
  }
  100% {
    clip: rect(103px, 450px, 50px, 0);
  }
}
@-webkit-keyframes textGlitch-anim-2 {
  0% {
    clip: rect(92px, 450px, 67px, 0);
  }
  5.8823529412% {
    clip: rect(86px, 450px, 98px, 0);
  }
  11.7647058824% {
    clip: rect(110px, 450px, 83px, 0);
  }
  17.6470588235% {
    clip: rect(22px, 450px, 24px, 0);
  }
  23.5294117647% {
    clip: rect(20px, 450px, 14px, 0);
  }
  29.4117647059% {
    clip: rect(101px, 450px, 33px, 0);
  }
  35.2941176471% {
    clip: rect(22px, 450px, 92px, 0);
  }
  41.1764705882% {
    clip: rect(76px, 450px, 3px, 0);
  }
  47.0588235294% {
    clip: rect(64px, 450px, 108px, 0);
  }
  52.9411764706% {
    clip: rect(28px, 450px, 103px, 0);
  }
  58.8235294118% {
    clip: rect(44px, 450px, 6px, 0);
  }
  64.7058823529% {
    clip: rect(15px, 450px, 6px, 0);
  }
  70.5882352941% {
    clip: rect(81px, 450px, 64px, 0);
  }
  76.4705882353% {
    clip: rect(33px, 450px, 45px, 0);
  }
  82.3529411765% {
    clip: rect(107px, 450px, 95px, 0);
  }
  88.2352941176% {
    clip: rect(52px, 450px, 41px, 0);
  }
  94.1176470588% {
    clip: rect(4px, 450px, 94px, 0);
  }
  100% {
    clip: rect(28px, 450px, 32px, 0);
  }
}
@keyframes textGlitch-anim-2 {
  0% {
    clip: rect(92px, 450px, 67px, 0);
  }
  5.8823529412% {
    clip: rect(86px, 450px, 98px, 0);
  }
  11.7647058824% {
    clip: rect(110px, 450px, 83px, 0);
  }
  17.6470588235% {
    clip: rect(22px, 450px, 24px, 0);
  }
  23.5294117647% {
    clip: rect(20px, 450px, 14px, 0);
  }
  29.4117647059% {
    clip: rect(101px, 450px, 33px, 0);
  }
  35.2941176471% {
    clip: rect(22px, 450px, 92px, 0);
  }
  41.1764705882% {
    clip: rect(76px, 450px, 3px, 0);
  }
  47.0588235294% {
    clip: rect(64px, 450px, 108px, 0);
  }
  52.9411764706% {
    clip: rect(28px, 450px, 103px, 0);
  }
  58.8235294118% {
    clip: rect(44px, 450px, 6px, 0);
  }
  64.7058823529% {
    clip: rect(15px, 450px, 6px, 0);
  }
  70.5882352941% {
    clip: rect(81px, 450px, 64px, 0);
  }
  76.4705882353% {
    clip: rect(33px, 450px, 45px, 0);
  }
  82.3529411765% {
    clip: rect(107px, 450px, 95px, 0);
  }
  88.2352941176% {
    clip: rect(52px, 450px, 41px, 0);
  }
  94.1176470588% {
    clip: rect(4px, 450px, 94px, 0);
  }
  100% {
    clip: rect(28px, 450px, 32px, 0);
  }
}
.glitch-text:before, .glitch-text:after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: black;
  clip: rect(0, 0, 0, 0);
}
.glitch-text:after {
  left: 2px;
  text-shadow: -1px 0 red;
  animation: textGlitch-anim-1 2s infinite linear alternate-reverse;
}
.glitch-text:before {
  left: -2px;
  text-shadow: 2px 0 blue;
  animation: textGlitch-anim-2 3s infinite linear alternate-reverse;
}

body {
  margin: 0;
  font-family: sans-serif;
  background-color: black;
}
</style>
</head>
<body>
  <div class="glitch-text" data-text="Alex Erlandsson">Alex Erlandsson</div>
</body>
</html>

11. Simple Glitch effect

Made by Sergey Shapovalov. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> 
<style>
body {
  background-color: #333;
}

.wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.glitch {
  font-size: 87px;
  font-family: Arial, sans-serif;
  color: #fff;
  text-transform: uppercase;
  position: relative;
}
.glitch:before, .glitch:after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.glitch:before {
  left: 2px;
  text-shadow: -3px 0 red;
  background-color: #333333;
  z-index: 20;
  animation: glitch-anim2 1.4s infinite linear alternate-reverse;
}
.glitch:after {
  left: -2px;
  text-shadow: 3px 0 blue;
  background-color: #333333;
  z-index: 20;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
          clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
  animation: glitch-anim1 1.4s infinite linear alternate-reverse;
}

@-webkit-keyframes glitch-anim1 {
  0% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 32%, 0% 32%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 32%, 0% 32%);
  }
  10% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 79%, 0% 79%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 79%, 0% 79%);
  }
  20% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 51%, 0% 51%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 51%, 0% 51%);
  }
  30% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 2%, 0% 2%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 2%, 0% 2%);
  }
  40% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 4%, 0% 4%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 4%, 0% 4%);
  }
  50% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 64%, 0% 64%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 64%, 0% 64%);
  }
  60% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 19%, 0% 19%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 19%, 0% 19%);
  }
  70% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 65%, 0% 65%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 65%, 0% 65%);
  }
  80% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 76%, 0% 76%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 76%, 0% 76%);
  }
  90% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 39%, 0% 39%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 39%, 0% 39%);
  }
  100% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 89%, 0% 89%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 89%, 0% 89%);
  }
}

@keyframes glitch-anim1 {
  0% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 32%, 0% 32%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 32%, 0% 32%);
  }
  10% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 79%, 0% 79%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 79%, 0% 79%);
  }
  20% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 51%, 0% 51%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 51%, 0% 51%);
  }
  30% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 2%, 0% 2%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 2%, 0% 2%);
  }
  40% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 4%, 0% 4%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 4%, 0% 4%);
  }
  50% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 64%, 0% 64%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 64%, 0% 64%);
  }
  60% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 19%, 0% 19%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 19%, 0% 19%);
  }
  70% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 65%, 0% 65%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 65%, 0% 65%);
  }
  80% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 76%, 0% 76%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 76%, 0% 76%);
  }
  90% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 39%, 0% 39%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 39%, 0% 39%);
  }
  100% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 89%, 0% 89%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 89%, 0% 89%);
  }
}
@-webkit-keyframes glitch-anim2 {
  0% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 28%, 0% 28%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 28%, 0% 28%);
  }
  10% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 58%, 0% 58%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 58%, 0% 58%);
  }
  20% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 19%, 0% 19%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 19%, 0% 19%);
  }
  30% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 20%, 0% 20%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 20%, 0% 20%);
  }
  40% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 0% 70%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 0% 70%);
  }
  50% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 43%, 0% 43%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 43%, 0% 43%);
  }
  60% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 15%, 0% 15%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 15%, 0% 15%);
  }
  70% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 54%, 0% 54%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 54%, 0% 54%);
  }
  80% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 30%, 0% 30%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 30%, 0% 30%);
  }
  90% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 17%, 0% 17%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 17%, 0% 17%);
  }
  100% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 66%, 0% 66%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 66%, 0% 66%);
  }
}
@keyframes glitch-anim2 {
  0% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 28%, 0% 28%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 28%, 0% 28%);
  }
  10% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 58%, 0% 58%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 58%, 0% 58%);
  }
  20% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 19%, 0% 19%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 19%, 0% 19%);
  }
  30% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 20%, 0% 20%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 20%, 0% 20%);
  }
  40% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 0% 70%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 0% 70%);
  }
  50% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 43%, 0% 43%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 43%, 0% 43%);
  }
  60% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 15%, 0% 15%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 15%, 0% 15%);
  }
  70% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 54%, 0% 54%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 54%, 0% 54%);
  }
  80% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 30%, 0% 30%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 30%, 0% 30%);
  }
  90% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 17%, 0% 17%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 17%, 0% 17%);
  }
  100% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 66%, 0% 66%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 66%, 0% 66%);
  }
}
</style>
</head>
<body>
  <div class="wrapper">
  <span data-text="glitch" class="glitch">glitch</span>
</div>
</body>
</html>