Template:Glitch.css

#container{
  display: grid;
}
#norm::before{
content:".";
}

#slow::before{
content:"..";
}

.glitch-fast, .glitch-norm, .glitch-slow{
  grid-column: 1;
  grid-row: 1;
}
.glitch-fast::after{
    content: attr(data-text);
    left: -1px;
    background: #fff;
    text-shadow: -0.05em 0 #7ff;
    /*-webkit-animation: -webkit-glitch-anim-1 2s infinite linear alternate-reverse;
    -moz-animation: glitch-anim-1 2s infinite linear alternate-reverse;*/
    animation: glitch-anim-1 2s infinite linear alternate-reverse;
    text-overflow: clip;
}
.glitch-slow::after{
    content: attr(data-text);
    left: 1px;
	background: #fff;
    text-shadow: 0.05em 0 #9f9;
    /*-webkit-animation: glitch-anim-1 2s infinite linear alternate-reverse;
    -moz-animation: glitch-anim-1 2s infinite linear alternate-reverse;*/
    animation: glitch-anim-1 2.1s infinite linear alternate-reverse;
    text-overflow: clip;
}
@keyframes glitch-anim-1 {
    0% {
        clip-path: inset(40% 0 61% 0);
    }
    20% {
        clip-path: inset(92% 0 1% 0);
    }
    40% {
        clip-path: inset(43% 0 22% 0);
    }
    60% {
        clip-path: inset(25% 0 72% 0);
    }
    80% {
        clip-path: inset(54% 0 31% 0);
    }
    100% {
        clip-path: inset(58% 0 43% 0);
    }
}
/*@-webkit-keyframes glitch-anim-1 {
    0% {
        -webkit-clip-path: inset(40% 0 61% 0);
    }
    20% {
        -webkit-clip-path: inset(92% 0 1% 0);
    }
    40% {
        -webkit-clip-path: inset(43% 0 22% 0);
    }
    60% {
        -webkit-clip-path: inset(25% 0 72% 0);
    }
    80% {
        -webkit-clip-path: inset(54% 0 31% 0);
    }
    100% {
        -webkit-clip-path: inset(58% 0 43% 0);
    }
}*/
.override{
	color:#fff;
	font-size: 0.2em;
}