Pure CSS Glitch Animation | Best Glitch Effect Ever – Codewithrandom

Pure CSS Glitch Animation | Best Glitch Effect Ever – Codewithrandom

Welcome🎉 to Code With Random blog. We learn how to create  Pure CSS Glitch Animation. We use HTML & CSS  for Pure CSS Glitch Animation. We hope you enjoy our blog so let’s start with a basic HTML structure for  Pure CSS Glitch Animation.  

HTML code

 <!DOCTYPE html>  
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<title>Glitch</title>
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="glitch" data-text="Codewithrandom">Codewithrandom</div>
<div class="glow">Codewithrandom</div>
<p class="subtitle">Frontend Developer | Anki</p>
</div>
<div class="scanlines"></div>
</body>
</html>

There is all HTML code for the  Pure CSS Glitch Animation. Now, you can see output without CSS, then we write CSS for the Pure CSS Glitch Animation.

CSS code

 body {  
background: black;
font-family: "Oswald", sans-serif;
font-style: italic;
}
.container {
position: absolute;
transform: translate(-50%, -50%);
top: 40%;
left: 50%;
}
.glitch, .glow {
color: #dfbfbf;
position: relative;
font-size: 9vw;
animation: glitch 5s 5s infinite;
}
.glitch::before, .glow::before {
content: attr(data-text);
position: absolute;
left: -2px;
text-shadow: -5px 0 magenta;
background: black;
overflow: hidden;
top: 0;
animation: noise-1 3s linear infinite alternate-reverse, glitch 5s 5.05s infinite;
}
.glitch::after, .glow::after {
content: attr(data-text);
position: absolute;
left: 2px;
text-shadow: -5px 0 lightgreen;
background: black;
overflow: hidden;
top: 0;
animation: noise-2 3s linear infinite alternate-reverse, glitch 5s 5s infinite;
}
@keyframes glitch {
1% {
transform: rotateX(10deg) skewX(90deg);
}
2% {
transform: rotateX(0deg) skewX(0deg);
}
}
@keyframes noise-1 {
3.3333333333% {
clip-path: inset(10px 0 73px 0);
}
6.6666666667% {
clip-path: inset(80px 0 1px 0);
}
10% {
clip-path: inset(63px 0 14px 0);
}
13.3333333333% {
clip-path: inset(3px 0 67px 0);
}
16.6666666667% {
clip-path: inset(95px 0 3px 0);
}
20% {
clip-path: inset(42px 0 2px 0);
}
23.3333333333% {
clip-path: inset(60px 0 37px 0);
}
26.6666666667% {
clip-path: inset(11px 0 25px 0);
}
30% {
clip-path: inset(93px 0 7px 0);
}
33.3333333333% {
clip-path: inset(5px 0 51px 0);
}
36.6666666667% {
clip-path: inset(7px 0 91px 0);
}
40% {
clip-path: inset(48px 0 7px 0);
}
43.3333333333% {
clip-path: inset(23px 0 72px 0);
}
46.6666666667% {
clip-path: inset(57px 0 26px 0);
}
50% {
clip-path: inset(29px 0 17px 0);
}
53.3333333333% {
clip-path: inset(97px 0 3px 0);
}
56.6666666667% {
clip-path: inset(36px 0 15px 0);
}
60% {
clip-path: inset(34px 0 49px 0);
}
63.3333333333% {
clip-path: inset(37px 0 35px 0);
}
66.6666666667% {
clip-path: inset(5px 0 66px 0);
}
70% {
clip-path: inset(53px 0 37px 0);
}
73.3333333333% {
clip-path: inset(44px 0 15px 0);
}
76.6666666667% {
clip-path: inset(13px 0 46px 0);
}
80% {
clip-path: inset(81px 0 11px 0);
}
83.3333333333% {
clip-path: inset(100px 0 1px 0);
}
86.6666666667% {
clip-path: inset(74px 0 27px 0);
}
90% {
clip-path: inset(26px 0 51px 0);
}
93.3333333333% {
clip-path: inset(12px 0 81px 0);
}
96.6666666667% {
clip-path: inset(3px 0 30px 0);
}
100% {
clip-path: inset(29px 0 11px 0);
}
}
@keyframes noise-2 {
0% {
clip-path: inset(60px 0 6px 0);
}
3.3333333333% {
clip-path: inset(37px 0 44px 0);
}
6.6666666667% {
clip-path: inset(30px 0 5px 0);
}
10% {
clip-path: inset(15px 0 43px 0);
}
13.3333333333% {
clip-path: inset(92px 0 3px 0);
}
16.6666666667% {
clip-path: inset(47px 0 50px 0);
}
20% {
clip-path: inset(91px 0 8px 0);
}
23.3333333333% {
clip-path: inset(52px 0 19px 0);
}
26.6666666667% {
clip-path: inset(19px 0 5px 0);
}
30% {
clip-path: inset(39px 0 4px 0);
}
33.3333333333% {
clip-path: inset(55px 0 3px 0);
}
36.6666666667% {
clip-path: inset(30px 0 56px 0);
}
40% {
clip-path: inset(42px 0 55px 0);
}
43.3333333333% {
clip-path: inset(49px 0 5px 0);
}
46.6666666667% {
clip-path: inset(60px 0 21px 0);
}
50% {
clip-path: inset(80px 0 6px 0);
}
53.3333333333% {
clip-path: inset(72px 0 27px 0);
}
56.6666666667% {
clip-path: inset(63px 0 18px 0);
}
60% {
clip-path: inset(99px 0 2px 0);
}
63.3333333333% {
clip-path: inset(11px 0 64px 0);
}
66.6666666667% {
clip-path: inset(35px 0 61px 0);
}
70% {
clip-path: inset(98px 0 1px 0);
}
73.3333333333% {
clip-path: inset(55px 0 2px 0);
}
76.6666666667% {
clip-path: inset(84px 0 5px 0);
}
80% {
clip-path: inset(41px 0 16px 0);
}
83.3333333333% {
clip-path: inset(56px 0 28px 0);
}
86.6666666667% {
clip-path: inset(80px 0 2px 0);
}
90% {
clip-path: inset(18px 0 19px 0);
}
93.3333333333% {
clip-path: inset(43px 0 7px 0);
}
96.6666666667% {
clip-path: inset(35px 0 15px 0);
}
100% {
clip-path: inset(78px 0 2px 0);
}
}
.scanlines {
overflow: hidden;
mix-blend-mode: difference;
}
.scanlines::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: repeating-linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.05) 0.5%, transparent 1%);
animation: fudge 7s ease-in-out alternate infinite;
}
@keyframes fudge {
from {
transform: translate(0px, 0px);
}
to {
transform: translate(0px, 2%);
}
}
.glow {
text-shadow: 0 0 1000px #dfbfbf;
color: transparent;
position: absolute;
top: 0;
}
.subtitle {
font-family: Arial, Helvetica, sans-serif;
font-weight: 100;
font-size: 1.3vw;
color: rgba(165, 141, 141, .4);
text-transform: uppercase;
letter-spacing: 1em;
text-align: center;
position: absolute;
left: 17%;
animation: glitch-2 5s 5.02s infinite;
}
@keyframes glitch-2 {
1% {
transform: rotateX(10deg) skewX(70deg);
}
2% {
transform: rotateX(0deg) skewX(0deg);
}
}

We have completed our CSS section,  Here is our final updated output CSS.

Final Output

We have completed our CSS section,  Here is our updated output with CSSHope you like the  Pure CSS Glitch Animation, you can see the output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

This post teaches us to create a  Pure CSS Glitch Animationusing simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

code by – Tee

Check out more…..



Leave a Reply