Template:Aspie/styles.css: Difference between revisions

Revision as of 18:51, 11 October 2024

/* train animation */
.train{
  animation: trainaimation 4s linear;
}
@keyframes trainaimation {
  0% {
    visibility:visible;
    transform: translate(0, 0);
  }
  100% {
    transform: translate(556%, 0);
  }
}

.texttraineffect {
  display:inline-flex;
}

.texttraineffect span {
  word-break: break-all;
  height: 1.2em;
  overflow: hidden;
  animation:t 4s linear;
}
.texttraineffect span:before {
  content:" ";
  display:inline-block;
}
/* The text will have an illusion of appearing as it passes the train using a width effect. */
@keyframes t {
  0%,15% {
    width:0%
  }
  75% {
    width:100%
  }

}



/*This changes the autism text to be animated in the colors of colorjak. you know since le heccing autism
I chose this in a very spefic way as the colors are the exact colors found on colorjak to the exact hex number.

Bright blue first: #3C76FC 
Soft yellow: #fff700(not exact due to it blending in to much :(  )
Vivd Red: #F23822
Moderate lime green: #61c959
Bright orange: #F5842A
black
Finally Moderate magenta: #AE47B8
*/
.colorjaktext{
	animation:colors 4s linear infinite;
}
@keyframes colors {
  0% {
    color: #3C76FC;
    text-shadow: 0 0 10px #5A88FF, 0 0 20px #5A88FF, 0 0 30px #3C76FC, 0 0 40px #3C76FC, 0 0 50px #3C76FC, 0 0 60px #3C76FC, 0 0 70px #3C76FC;
  }
  16.6% {
    color: #fff700;
    text-shadow: 0 0 20px #ffe600, 0 0 30px #ffe600, 0 0 40px #fff700, 0 0 50px #fff700, 0 0 60px #fff700, 0 0 70px #fff700, 0 0 80px #fff700;
  }
  33.3% {
    color: #F23822;
    text-shadow: 0 0 10px #FF5A3C, 0 0 20px #FF5A3C, 0 0 30px #F23822, 0 0 40px #F23822, 0 0 50px #F23822, 0 0 60px #F23822, 0 0 70px #F23822;
  }
  50% {
    color: #61c959;
    text-shadow: 0 0 20px #77DB71, 0 0 30px #77DB71, 0 0 40px #61c959, 0 0 50px #61c959, 0 0 60px #61c959, 0 0 70px #61c959, 0 0 80px #61c959;
  }
  66.6% {
    color: #F5842A;
    text-shadow: 0 0 10px #FF9A48, 0 0 20px #FF9A48, 0 0 30px #F5842A, 0 0 40px #F5842A, 0 0 50px #F5842A, 0 0 60px #F5842A, 0 0 70px #F5842A;
  }
  83.3% {
    color: black;
    text-shadow: 0 0 20px #333333, 0 0 30px #333333, 0 0 40px #000000, 0 0 50px #000000, 0 0 60px #000000, 0 0 70px #000000, 0 0 80px #000000;
  }
  100% {
    color: #3C76FC;
    text-shadow: 0 0 10px #5A88FF, 0 0 20px #5A88FF, 0 0 30px #3C76FC, 0 0 40px #3C76FC, 0 0 50px #3C76FC, 0 0 60px #3C76FC, 0 0 70px #3C76FC;
  }
}