Template:Text Shuffle/styles.css: Difference between revisions
Template page
More actions
Content deleted Content added
bad math |
No edit summary |
||
| Line 1: | Line 1: | ||
/* turned into slop atp */ |
|||
/* turned into slop atp */ |
/* turned into slop atp */ |
||
| Line 10: | Line 12: | ||
.TextShuffler .word { |
.TextShuffler .word { |
||
opacity: 0; |
opacity: 0; |
||
animation: fadeCycle |
animation: fadeCycle 20s linear infinite; |
||
position: absolute; |
position: absolute; |
||
transition: opacity |
transition: opacity 1.0s ease-in-out; |
||
pointer-events: none; |
|||
} |
} |
||
.TextShuffler .word:nth-child(1) |
.TextShuffler .word:nth-child(1) { animation-delay: 0s; } |
||
.TextShuffler .word:nth-child(2) |
.TextShuffler .word:nth-child(2) { animation-delay: 4s; } |
||
.TextShuffler .word:nth-child(3) |
.TextShuffler .word:nth-child(3) { animation-delay: 8s; } |
||
.TextShuffler .word:nth-child(4) |
.TextShuffler .word:nth-child(4) { animation-delay: 12s; } |
||
.TextShuffler .word:nth-child(5) |
.TextShuffler .word:nth-child(5) { animation-delay: 16s; } |
||
.TextShuffler .word:nth-child(6) |
.TextShuffler .word:nth-child(6) { animation-delay: 20s; } |
||
.TextShuffler .word:nth-child(7) { animation-delay: 12s; } |
|||
.TextShuffler .word:nth-child(8) { animation-delay: 14s; } |
|||
.TextShuffler .word:nth-child(9) { animation-delay: 16s; } |
|||
.TextShuffler .word:nth-child(10) { animation-delay: 18s; } |
|||
.TextShuffler .word:nth-child(11) { animation-delay: 20s; } |
|||
.TextShuffler .word:nth-child(12) { animation-delay: 22s; } |
|||
.TextShuffler .word:nth-child(13) { animation-delay: 24s; } |
|||
.TextShuffler .word:nth-child(14) { animation-delay: 26s; } |
|||
@keyframes fadeCycle { |
@keyframes fadeCycle { |
||
Revision as of 17:56, April 18, 2025
/* turned into slop atp */
/* turned into slop atp */
.TextShuffler {
font-size: 1.9em;
color: #ffffff;
height: 2.0em;
display: flex;
}
.TextShuffler .word {
opacity: 0;
animation: fadeCycle 20s linear infinite;
position: absolute;
transition: opacity 1.0s ease-in-out;
}
.TextShuffler .word:nth-child(1) { animation-delay: 0s; }
.TextShuffler .word:nth-child(2) { animation-delay: 4s; }
.TextShuffler .word:nth-child(3) { animation-delay: 8s; }
.TextShuffler .word:nth-child(4) { animation-delay: 12s; }
.TextShuffler .word:nth-child(5) { animation-delay: 16s; }
.TextShuffler .word:nth-child(6) { animation-delay: 20s; }
@keyframes fadeCycle {
0% { opacity: 0; }
5% { opacity: 1; }
25% { opacity: 1; }
30% { opacity: 0; }
100% { opacity: 0; }
}