Template:Text Shuffle/styles.css: Difference between revisions
Template page
More actions
Content deleted Content added
suka mathematics |
No edit summary |
||
| Line 25: | Line 25: | ||
@keyframes fadeCycle { |
@keyframes fadeCycle { |
||
0% { opacity: 0; } |
0% { opacity: 0; } |
||
2% { opacity: 1; } |
|||
8% { opacity: 1; } |
|||
10% { opacity: 0; } |
|||
100% { opacity: 0; } |
100% { opacity: 0; } |
||
} |
} |
||
Revision as of 18:37, April 18, 2025
/* turned into slop atp */
.TextShuffler {
font-size: 1.4em;
color: #ffffff;
display: flex;
}
.TextShuffler .word {
opacity: 0;
animation: fadeCycle 56s linear infinite;
position: absolute;
transition: opacity 0.5s ease-in-out;
pointer-events: none;
}
.TextShuffler .word:nth-child(1) { animation-delay: 0s; }
.TextShuffler .word:nth-child(2) { animation-delay: 8s; }
.TextShuffler .word:nth-child(3) { animation-delay: 16s; }
.TextShuffler .word:nth-child(4) { animation-delay: 24s; }
.TextShuffler .word:nth-child(5) { animation-delay: 32s; }
.TextShuffler .word:nth-child(6) { animation-delay: 40s; }
.TextShuffler .word:nth-child(7) { animation-delay: 48s; }
@keyframes fadeCycle {
0% { opacity: 0; }
2% { opacity: 1; }
8% { opacity: 1; }
10% { opacity: 0; }
100% { opacity: 0; }
}