1.glitch {
2  position: relative;
3  font-size: 25px;
4  font-weight: 700;
5  line-height: 1.2;
6  color: #fff;
7  letter-spacing: 5px;
8  z-index: 1;
9  animation: shift 1s ease-in-out infinite alternate;
10}
11
12.glitch:before,
13.glitch:after {
14  display: block;
15  content: attr(data-glitch);
16  position: absolute;
17  top: 0;
18  left: 0;
19  opacity: 0.8;
20}
21
22.glitch:before {
23  animation: glitch 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
24  color: #8b00ff;
25  z-index: -1;
26}
27
28.glitch:after {
29  animation: glitch 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
30  color: #00e571;
31  z-index: -2;
32}
33
34@keyframes glitch {
35  0% {
36    transform: translate(0);
37  }
38
39  20% {
40    transform: translate(-3px, 3px);
41  }
42
43  40% {
44    transform: translate(-3px, -3px);
45  }
46
47  60% {
48    transform: translate(3px, 3px);
49  }
50
51  80% {
52    transform: translate(3px, -3px);
53  }
54
55  to {
56    transform: translate(0);
57  }
58}
59
60@keyframes shift {
61  0%, 40%, 44%, 58%, 61%, 65%, 69%, 73%, 100% {
62    transform: skewX(0deg);
63  }
64
65  41% {
66    transform: skewX(10deg);
67  }
68
69  42% {
70    transform: skewX(-10deg);
71  }
72
73  59% {
74    transform: skewX(40deg) skewY(10deg);
75  }
76
77  60% {
78    transform: skewX(-40deg) skewY(-10deg);
79  }
80
81  63% {
82    transform: skewX(10deg) skewY(-5deg);
83  }
84
85  70% {
86    transform: skewX(-50deg) skewY(-20deg);
87  }
88
89  71% {
90    transform: skewX(10deg) skewY(-10deg);
91  }
92}
93