.glitch {
    display: inline-block;
    font-size: 2.4em;
    position: relative;
} 
.glitch::after, .glitch::before {
    content: attr(data-text);
    position: absolute;
    opacity: 0.9;
    color:white;
    top:0;
    bottom:0;
    height: 100%;
    width: 100%;
    background: unset;
    overflow: hidden;
    clip: rect(0, 1200px, 0, 0);
    z-index: 1;
}

@keyframes noise-anim {
    0%   { clip: rect(97px, 9999px, 42px, 0); filter: hue-rotate(360) }
    5%   { clip: rect(37px, 9999px, 28px, 0); filter: hue-rotate(320) }
    10%  { clip: rect(39px, 9999px, 84px, 0); filter: hue-rotate(340) }
    15%  { clip: rect(68px, 9999px, 54px, 0); filter: hue-rotate(300) }
    20%  { clip: rect(32px, 9999px, 33px, 0); filter: hue-rotate(260) }
    25%  { clip: rect(53px, 9999px, 03px, 0); filter: hue-rotate(280) }
    30%  { clip: rect(35px, 9999px, 58px, 0); filter: hue-rotate(180) }
    35%  { clip: rect(81px, 9999px, 03px, 0); filter: hue-rotate(240) }
    40%  { clip: rect(99px, 9999px, 94px, 0); filter: hue-rotate(160) }
    45%  { clip: rect(09px, 9999px, 95px, 0); filter: hue-rotate(200) }
    50%  { clip: rect(16px, 9999px, 45px, 0); filter: hue-rotate(140) }
    55%  { clip: rect(78px, 9999px, 42px, 0); filter: hue-rotate(160) }
    60%  { clip: rect(19px, 9999px, 03px, 0); filter: hue-rotate(80) }
    65%  { clip: rect(33px, 9999px, 06px, 0); filter: hue-rotate(120) }
    70%  { clip: rect(94px, 9999px, 44px, 0); filter: hue-rotate(50) }
    75%  { clip: rect(75px, 9999px, 25px, 0); filter: hue-rotate(90) }
    80%  { clip: rect(70px, 9999px, 62px, 0); filter: hue-rotate(20) }
    85%  { clip: rect(85px, 9999px, 42px, 0); filter: hue-rotate(-40) }
    90%  { clip: rect(35px, 9999px, 31px, 0); filter: hue-rotate(0) }
    95%  { clip: rect(15px, 9999px, 28px, 0); filter: hue-rotate(40) }
    100% { clip: rect(67px, 9999px, 20px, 0); filter: hue-rotate(0) }
}
 .glitch::after {
    left: 2px;
    right: 0px;
    text-shadow: -1px 0 red;
}
.glitch.alwaysAnimating::after {
    animation: noise-anim 2s infinite linear alternate-reverse;
}
 @keyframes noise-anim-2 {
	 0%   { clip: rect(79px, 9999px, 36px, 0); filter: hue-rotate(0) }
	 5%   { clip: rect(94px, 9999px, 06px, 0); filter: hue-rotate(40) }
	 10%  { clip: rect(32px, 9999px, 85px, 0); filter: hue-rotate(0) }
	 15%  { clip: rect(42px, 9999px, 63px, 0); filter: hue-rotate(-40) }
	 20%  { clip: rect(16px, 9999px, 42px, 0); filter: hue-rotate(20) }
	 25%  { clip: rect(46px, 9999px, 51px, 0); filter: hue-rotate(90) }
	 30%  { clip: rect(14px, 9999px, 59px, 0); filter: hue-rotate(50) }
	 35%  { clip: rect(55px, 9999px, 17px, 0); filter: hue-rotate(120) }
	 40%  { clip: rect(73px, 9999px, 60px, 0); filter: hue-rotate(80) }
	 45%  { clip: rect(65px, 9999px, 84px, 0); filter: hue-rotate(160) }
	 50%  { clip: rect(56px, 9999px, 49px, 0); filter: hue-rotate(140) }
	 55%  { clip: rect(62px, 9999px, 40px, 0); filter: hue-rotate(200) }
	 60%  { clip: rect(83px, 9999px, 83px, 0); filter: hue-rotate(160) }
	 65%  { clip: rect(10px, 9999px, 07px, 0); filter: hue-rotate(240) }
	 70%  { clip: rect(50px, 9999px, 60px, 0); filter: hue-rotate(180) }
	 75%  { clip: rect(41px, 9999px, 87px, 0); filter: hue-rotate(280) }
	 80%  { clip: rect(88px, 9999px, 81px, 0); filter: hue-rotate(260) }
	 85%  { clip: rect(52px, 9999px, 35px, 0); filter: hue-rotate(300) }
	 90%  { clip: rect(68px, 9999px, 67px, 0); filter: hue-rotate(340) }
	 95%  { clip: rect(32px, 9999px, 09px, 0); filter: hue-rotate(320) }
	 100% { clip: rect(14px, 9999px, 03px, 0); filter: hue-rotate(360) }
}
 .glitch::before {
     left: 2px;
     right: 0;
     text-shadow: 1px 0 blue;
}
.glitch.alwaysAnimating::before {
    animation: noise-anim-2 3s infinite linear alternate-reverse;
}