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; } }