.glitch {
    position: relative;
    color: #fff;
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.glitch::before {
    color: #f0f;
    animation: glitch-before 3s infinite linear;
    clip-path: polygon(0 30%, 100% 30%, 100% 50%, 0 50%);
}

.glitch::after {
    color: #0ff;
    animation: glitch-after 3s infinite linear;
    clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%);
}

@keyframes glitch-before {
    0%   { transform: translate(0); clip-path: polygon(0 30%, 100% 30%, 100% 50%, 0 50%); }
    2%   { transform: translate(-3px, 1px); clip-path: polygon(0 15%, 100% 15%, 100% 35%, 0 35%); }
    4%   { transform: translate(3px, -1px); clip-path: polygon(0 55%, 100% 55%, 100% 75%, 0 75%); }
    6%   { transform: translate(0); clip-path: polygon(0 30%, 100% 30%, 100% 50%, 0 50%); }
    20%  { transform: translate(0); clip-path: polygon(0 30%, 100% 30%, 100% 50%, 0 50%); }
    22%  { transform: translate(4px, 0); clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%); }
    24%  { transform: translate(-4px, 1px); clip-path: polygon(0 70%, 100% 70%, 100% 90%, 0 90%); }
    26%  { transform: translate(0); clip-path: polygon(0 30%, 100% 30%, 100% 50%, 0 50%); }
    100% { transform: translate(0); clip-path: polygon(0 30%, 100% 30%, 100% 50%, 0 50%); }
}

@keyframes glitch-after {
    0%   { transform: translate(0); clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%); }
    2%   { transform: translate(3px, -1px); clip-path: polygon(0 45%, 100% 45%, 100% 65%, 0 65%); }
    4%   { transform: translate(-3px, 1px); clip-path: polygon(0 10%, 100% 10%, 100% 30%, 0 30%); }
    6%   { transform: translate(0); clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%); }
    20%  { transform: translate(0); clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%); }
    22%  { transform: translate(-4px, 1px); clip-path: polygon(0 80%, 100% 80%, 100% 95%, 0 95%); }
    24%  { transform: translate(4px, -1px); clip-path: polygon(0 25%, 100% 25%, 100% 40%, 0 40%); }
    26%  { transform: translate(0); clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%); }
    100% { transform: translate(0); clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%); }
}