glitching text

<style>
 #glitch {

    /* Change glitch effect here */
    /* animation: glitch-2 1s infinite linear; */
    animation: glitch-1 2s infinite linear;
}

@keyframes glitch-1 {
    0%,
    12%,
    15%,
    52%,
    55%,
    82%,
    85%,
    100% {
        opacity: 1;
        transform: scaleX(1) scaleY(1);
    }
    13% {
        opacity: .8;
        transform: scaleY(2);
        color: #fff;
    }
    53% {
        opacity: .8;
        transform: scaleX(.7);
        color: #000;
    }
    83% {
        opacity: 8;
        transform: rotate(-10deg);
        color: #fff;
    }
}

@keyframes glitch-2 {
    13% {
        color: #000;
    }
    53% {
        color: #fff;
    }
    83% {
        color: #000;
    }
}
</style>

<div id="glitch">text</div>