glitch animation

styles.css

# https://psycho-pass.com/

# <p data-text="THEATER">THEATER</p>
# p:before {
#     content: attr(data-text);
#     color: #24b8c6;
#     opacity: .75;
#     mix-blend-mode: screen;
#     position: absolute;
#     top: 7px;
#     animation: noise 1.5s ease infinite;
# }

@keyframes noise {

    0%,
    20%,
    33%,
    60%,
    64%,
    66%,
    69%,
    73%,
    75%,
    90%,
    93%,
    100% {
        transform: skew(0deg)
    }

    21%,
    81% {
        transform: skew(30deg, 0deg)
    }

    22%,
    82% {
        transform: skew(-30deg, 0deg)
    }

    61% {
        transform: skew(35deg)
    }

    62% {
        transform: skew(-15deg, -8deg)
    }

    65% {
        transform: skew(15deg, -8deg)
    }

    70% {
        transform: skew(-65deg)
    }

    74% {
        transform: skew(15deg, -15deg)
    }
}

@keyframes glitch {
    0%, 20%, 33%, 60%, 64%, 66%, 69%, 73%, 75%, 90%, 93%, 100% {
    transform: skew(0deg);
    }
    21%, 81% {
    transform: skew(15deg, 0deg);
    }
    22%, 82% {
    transform: skew(-15deg, 0deg);
    }
    61% {
    transform: skew(17.5deg);
    }
    62% {
    transform: skew(-7.5deg, -4deg);
    }
    65% {
    transform: skew(7.5deg, -4deg);
    }
    70% {
    transform: skew(-35deg);
    }
    74% {
    transform: skew(7.5deg, -7.5deg);

    }
}