1.glitch {
2  position: relative;
3  font-size: 60px;
4  font-weight: bold;
5  color: #ffffff;
6  letter-spacing: 3px;
7  z-index: 1;
8}
9
10.glitch:before,
11.glitch:after {
12  display: block;
13  content: attr(data-text);
14  position: absolute;
15  top: 0;
16  left: 0;
17  opacity: 0.8;
18}
19
20.glitch:before {
21  animation: glitch-it 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
22  color: #00ffff;
23  z-index: -1;
24}
25
26.glitch:after {
27  animation: glitch-it 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both
28    infinite;
29  color: #ff00ff;
30  z-index: -2;
31}
32
33@keyframes glitch-it {
34  0% {
35    transform: translate(0);
36  }
37  20% {
38    transform: translate(-2px, 2px);
39  }
40  40% {
41    transform: translate(-2px, -2px);
42  }
43  60% {
44    transform: translate(2px, 2px);
45  }
46  80% {
47    transform: translate(2px, -2px);
48  }
49  to {
50    transform: translate(0);
51  }
52}
53