User:Wavpro/Sandbox/style.css

.wou {
  position: absolute;
  float: left;  
  clear: both;
  -webkit-filter: drop-shadow(1px 1px 0 red)
                  drop-shadow(-1px -1px 0 red);
  filter: drop-shadow(1px 1px 0 red) 
          drop-shadow(-1px -1px 0 red);
}

.wou\-animation {
  animation: glitch 1s linear infinite;
}

@keyframes glitch {
  2%, 64% {
    transform: translate(2px, 0) skew(0deg);
  }
  4%, 60% {
    transform: translate(-2px, 0) skew(0deg);
  }
  62% {
    transform: translate(0, 0) skew(5deg);
  }
}

.woubefore {
  animation: glitchTop 1s linear infinite;
  clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}

@keyframes glitchTop{
  2%, 64% {
    transform: translate(2px, -2px);
  }
  4%, 60% {
    transform: translate(-2px, 2px);
  }
  62% {
    transform: translate(13px, -1px) skew(-13deg); 
  }
}

.wouafter {
  animation: glitchBottom 1.5s linear infinite;
  clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
}

@keyframes glitchBottom {
  2%, 64% {
    transform: translate(-2px, 0);
  }
  4%, 60% {
    transform: translate(-2px, 0);
  }
  62% {
    transform: translate(-22px, 5px) skew(21deg);
  }
}

.wou\-wrapper {
	display: block;
	float: left;
	height: 317px;
	width: 150px;
}

.appearing\-text {
  text-shadow: 1px 0 10px red;
  color: red;
  font-weight: bold;
  -webkit-user-select: none; /* Safari */        
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */
  visibility: hidden;
  will-change: opacity, visibility;
}

.appearing\-text1 {
  animation: fadeInThenOut 5s linear;
  animation-iteration-count: 1;
  animation-delay: 5s;
}
.appearing\-text2 {
  animation: fadeInThenOut 5s linear;
  animation-iteration-count: 1;
  animation-delay: 6s;
}
.appearing\-text3 {
  animation: fadeInThenOut 5s linear;
  animation-iteration-count: 1;
  animation-delay: 10s;
}
.appearing\-text4 {
  animation: fadeInThenOut 5s linear;
  animation-iteration-count: 1;
  animation-delay: 14s;
}
.appearing\-text5 {
  animation: fadeInThenOut 5s linear;
  animation-iteration-count: 1;
  animation-delay: 16s;
}
.appearing\-text6 {
  animation: fadeInThenOut 5s linear;
  animation-iteration-count: 1;
  animation-delay: 20s;
}
.appearing\-text7 {
  animation: fadeInThenOut 5s linear;
  animation-iteration-count: 1;
  animation-delay: 22.5s;
}
.appearing\-text8 {
  animation: fadeInThenOut 5s linear;
  animation-iteration-count: 1;
  animation-delay: 25s;
}
.appearing\-text9 {
  animation: fadeInThenOut 5s linear;
  animation-iteration-count: 1;
  animation-delay: 30s;
}
.appearing\-text10 {
  animation: fadeInThenOut 5s linear;
  animation-iteration-count: 1;
  animation-delay: 31s;
}
.appearing\-text11 {
  animation: fadeInThenOut 5s linear;
  animation-iteration-count: 1;
  animation-delay: 33s;
}
.appearing\-text12 {
  animation: fadeInThenOut 5s linear;
  animation-iteration-count: 1;
  animation-delay: 36s;
}
.appearing\-text13 {
  animation: fadeInThenOut 5s linear;
  animation-iteration-count: 1;
  animation-delay: 40s;
}
.appearing\-text14 {
  animation: fadeInThenOut 5s linear;
  animation-iteration-count: 1;
  animation-delay: 41s;
}

@keyframes fadeInThenOut {
  0% {
    visibility: hidden;
    opacity: 0;
  }
  50% {
    visibility: visible;
    opacity: 1;
  }
  100% {
    visibility: hidden;
    opacity: 0;
  }
}