|
|
| Line 1: |
Line 1: |
| /* train animation */
| | PLACEHOLDER |
| .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;
| |
| }
| |
| }
| |
