.glitch {
    position: relative;
    margin: 0 auto;
    color: #333;
    font-size: 50px;
    font-family: monospace;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    transform: scale3d(1, 1, 1);
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    background: #fff;
    color: #333;
    clip: rect(0, 900px, 0, 0);
}

.glitch::before {
    left: 7px;
    text-shadow: 1px 0 green;
    animation: glitch-effect 3s infinite linear alternate-reverse;
}

.glitch::after {
    left: 3px;
    text-shadow: -1px 0 red;
    animation: glitch-effect 2s infinite linear alternate-reverse;
}

@keyframes glitch-effect {
    0% {
        clip: rect(88px, 9999px, 39px, 0);
    }

    5% {
        clip: rect(6px, 9999px, 67px, 0);
    }

    10% {
        clip: rect(20px, 9999px, 20px, 0);
    }

    15% {
        clip: rect(6px, 9999px, 89px, 0);
    }

    20% {
        clip: rect(70px, 9999px, 32px, 0);
    }

    25% {
        clip: rect(4px, 9999px, 81px, 0);
    }

    30% {
        clip: rect(95px, 9999px, 82px, 0);
    }

    35% {
        clip: rect(68px, 9999px, 29px, 0);
    }

    40% {
        clip: rect(64px, 9999px, 50px, 0);
    }

    45% {
        clip: rect(53px, 9999px, 23px, 0);
    }

    50% {
        clip: rect(59px, 9999px, 52px, 0);
    }

    55% {
        clip: rect(12px, 9999px, 46px, 0);
    }

    60% {
        clip: rect(52px, 9999px, 17px, 0);
    }

    65% {
        clip: rect(26px, 9999px, 75px, 0);
    }

    70% {
        clip: rect(55px, 9999px, 4px, 0);
    }

    75% {
        clip: rect(89px, 9999px, 58px, 0);
    }

    80% {
        clip: rect(24px, 9999px, 7px, 0);
    }

    85% {
        clip: rect(22px, 9999px, 28px, 0);
    }

    90% {
        clip: rect(17px, 9999px, 65px, 0);
    }

    95% {
        clip: rect(52px, 9999px, 69px, 0);
    }

    100% {
        clip: rect(49px, 9999px, 41px, 0);
    }
}