CSSだけで作る、ノイズと走査線が揺らぐグリッチテキストアニメーション

<div class="kumonosu-main-wrapper">
	<div class="kumonosu-glitch-container">
		<div class="kumonosu-glitch-text" data-text="GLITCH">GLITCH</div>
		<div class="kumonosu-scanline"></div>
	</div>
</div>

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	background: #000;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.kumonosu-main-wrapper {
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	overflow: hidden;
	width: 100%;
}
.kumonosu-main-wrapper::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: repeating-linear-gradient(0deg, rgb(255 255 255 / .03) 0, rgb(255 255 255 / .03) 1px, transparent 1px, transparent 2px);
	pointer-events: none;
	animation: kumonosu-noise 0.5s infinite;
	z-index: 1;
}
.kumonosu-glitch-container {
	position: relative;
	padding: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2;
}
.kumonosu-glitch-container::before {
	content: '';
	position: absolute;
	top: -20px;
	left: -20px;
	right: -20px;
	bottom: -20px;
	background: radial-gradient(circle at 30% 50%, rgb(233 69 96 / .2) 0%, transparent 50%);
	filter: blur(40px);
	animation: kumonosu-glowPulse 3s infinite;
	z-index: -1;
}
.kumonosu-glitch-text {
	font-size: 20vw;
	font-weight: 900;
	color: #fff;
	text-shadow: 2px 2px 4px rgb(0 0 0 / .3), 0 0 20px rgb(233 69 96 / .5);
	position: relative;
	display: inline-block;
	animation: kumonosu-glitch-skew 4s infinite;
	letter-spacing: 10px;
	white-space: nowrap;
}
.kumonosu-glitch-text::before,
.kumonosu-glitch-text::after {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: transparent;
}
.kumonosu-glitch-text::before {
	animation: kumonosu-glitch-1 0.8s infinite linear alternate-reverse;
	color: #e94560;
	text-shadow: 2px 0 0 #4e9eff, -2px 0 0 lime;
	z-index: -1;
}
.kumonosu-glitch-text::after {
	animation: kumonosu-glitch-2 0.8s infinite linear alternate-reverse;
	color: #4e9eff;
	text-shadow: 2px 0 0 #e94560, -2px 0 0 #ff0;
	z-index: -2;
}
.kumonosu-scanline {
	position: absolute;
	top: -50%;
	left: 0;
	width: 100%;
	height: 200%;
	background: linear-gradient(to bottom, transparent 50%, rgb(0 0 0 / .3) 50%);
	background-size: 100% 4px;
	pointer-events: none;
	animation: kumonosu-scanline-anim 8s linear infinite;
	z-index: 10;
}
@keyframes kumonosu-glitch-skew {
	0%, 100% {
		transform: skew(0deg)
	}
	2% {
		transform: skew(2deg)
	}
	4% {
		transform: skew(-2deg)
	}
	6% {
		transform: skew(1deg)
	}
	8% {
		transform: skew(-1deg)
	}
	10%, 90% {
		transform: skew(0deg)
	}
}
@keyframes kumonosu-glitch-1 {
	0%, 100% {
		clip-path: inset(0 0 0 0);
		transform: translate(0);
		opacity: .8
	}
	10% {
		clip-path: inset(20% 0 30% 0);
		transform: translate(-5px, 3px);
		opacity: 1
	}
	30% {
		clip-path: inset(40% 0 40% 0);
		transform: translate(-5px, 5px);
		opacity: 1
	}
	50% {
		clip-path: inset(30% 0 50% 0);
		transform: translate(-3px, 3px);
		opacity: .9
	}
	80% {
		clip-path: inset(15% 0 70% 0);
		transform: translate(4px, -4px);
		opacity: 1
	}
}
@keyframes kumonosu-glitch-2 {
	0%, 100% {
		clip-path: inset(0 0 0 0);
		transform: translate(0);
		opacity: .8
	}
	20% {
		clip-path: inset(30% 0 50% 0);
		transform: translate(-5px, 3px);
		opacity: 1
	}
	40% {
		clip-path: inset(40% 0 40% 0);
		transform: translate(-5px, 5px);
		opacity: .9
	}
	70% {
		clip-path: inset(50% 0 30% 0);
		transform: translate(4px, -4px);
		opacity: .8
	}
}
@keyframes kumonosu-noise {
	0%, 100% {
		transform: translate(0, 0)
	}
	10% {
		transform: translate(-0.5%, -0.5%)
	}
	20% {
		transform: translate(0.5%, 0.5%)
	}
	40% {
		transform: translate(0.5%, -0.5%)
	}
}
@keyframes kumonosu-scanline-anim {
	0% {
		transform: translateY(-20%)
	}
	100% {
		transform: translateY(20%)
	}
}
@keyframes kumonosu-glowPulse {
	0%, 100% {
		opacity: .5;
		transform: scale(1)
	}
	50% {
		opacity: .8;
		transform: scale(1.1)
	}
}
@media (max-width:768px) {
	.kumonosu-glitch-text {
		letter-spacing: 5px
	}
}
@media (max-width:480px) {
	.kumonosu-glitch-text {
		letter-spacing: 3px;
		font-size: 25vw;
	}
}
.kumonosu-glitch-text:hover {
	animation: kumonosu-glitch-skew 1s infinite
}