Template:Aspietrainanimation.css: Difference between revisions

/* 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 but also added new ones
*/
.colorjaktext{
   animation: colors 3s steps(1) infinite;
}
@keyframes colors {
  0% {
    color: #1E90FF; /* Bright blue */
    text-shadow: 0 0 5px #339FFF, 0 0 10px #339FFF, 0 0 15px #1E90FF;
  }
  14.28% {
    color: #00FFFF; /* Aqua */
    text-shadow: 0 0 5px #00DDDD, 0 0 10px #00DDDD, 0 0 15px #00FFFF;
  }
  28.56% {
    color: #FF4500; /* Bright red */
    text-shadow: 0 0 5px #FF6347, 0 0 10px #FF6347, 0 0 15px #FF4500;
  }
  42.84% {
    color: #32CD32; /* Bright lime green */
    text-shadow: 0 0 5px #4DF24D, 0 0 10px #4DF24D, 0 0 15px #32CD32;
  }
  57.12% {
    color: #FF69B4; /* Bright pink */
    text-shadow: 0 0 5px #FF85C0, 0 0 10px #FF85C0, 0 0 15px #FF69B4;
  }
  71.40% {
    color: #8A2BE2; /* Electric Purple (replaces black) */
    text-shadow: 0 0 5px #A855FF, 0 0 10px #A855FF, 0 0 15px #8A2BE2;
  }
  85.68% {
    color: #DA70D6; /* Bright magenta */
    text-shadow: 0 0 5px #EE82EE, 0 0 10px #EE82EE, 0 0 15px #DA70D6;
  }
  100% {
    color: #1E90FF; /* Back to Bright blue */
    text-shadow: 0 0 5px #339FFF, 0 0 10px #339FFF, 0 0 15px #1E90FF;
  }
}