Loader by 0senno

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: #ff8b00; /* Updated color */
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
30    infinite;
31  color: #57e500; /* Updated color */
32  z-index: -2;
33}
34
35@keyframes glitch {
36  0% {
37    transform: translate(0);
38  }
39
40  20% {
41    transform: translate(-3px, 3px);
42  }
43
44  40% {
45    transform: translate(-3px, -3px);
46  }
47
48  60% {
49    transform: translate(3px, 3px);
50  }
51
52  80% {
53    transform: translate(3px, -3px);
54  }
55
56  to {
57    transform: translate(0);
58  }
59}
60
61@keyframes shift {
62  0%,
63  40%,
64  44%,
65  58%,
66  61%,
67  65%,
68  69%,
69  73%,
70  100% {
71    transform: skewX(0deg);
72  }
73
74  41% {
75    transform: skewX(10deg);
76  }
77
78  42% {
79    transform: skewX(-10deg);
80  }
81
82  59% {
83    transform: skewX(40deg) skewY(10deg);
84  }
85
86  60% {
87    transform: skewX(-40deg) skewY(-10deg);
88  }
89
90  63% {
91    transform: skewX(10deg) skewY(-5deg);
92  }
93
94  70% {
95    transform: skewX(-50deg) skewY(-20deg);
96  }
97
98  71% {
99    transform: skewX(10deg) skewY(-10deg);
100  }
101}
102