User:Wavpro/Sandbox/style.css

From JoJo's Bizarre Encyclopedia - JoJo Wiki
< User:Wavpro‎ | Sandbox
Revision as of 17:53, 12 September 2022 by Wavpro (talk | contribs)
Jump to navigation Jump to search
Exclamation.png Note: This is a user's personal page attached to their profile!
This is not an actual article, may not be related to JoJo or Araki, and is not associated with the wiki. As such, it may not adhere to the policies.
.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;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}