Template:Text Shuffle/styles.css: Difference between revisions
Template page
More actions
Content deleted Content added
No edit summary Tag: Reverted |
idk what im doing atp :sob: Tags: Undo Reverted |
||
| Line 16: | Line 16: | ||
left: 0; |
left: 0; |
||
opacity: 0; |
opacity: 0; |
||
animation: fadeInOut |
animation: fadeInOut 10s infinite; |
||
} |
} |
||
| Line 29: | Line 29: | ||
.TextShuffler .word:nth-child(9) { animation-delay: 8s; } |
.TextShuffler .word:nth-child(9) { animation-delay: 8s; } |
||
.TextShuffler .word:nth-child(10) { animation-delay: 9s; } |
.TextShuffler .word:nth-child(10) { animation-delay: 9s; } |
||
.TextShuffler .word:nth-child(11) { animation-delay: 10s; } |
|||
.TextShuffler .word:nth-child(12) { animation-delay: 11s; } |
|||
.TextShuffler .word:nth-child(13) { animation-delay: 12s; } |
|||
.TextShuffler .word:nth-child(14) { animation-delay: 13s; } |
|||
.TextShuffler .word:nth-child(15) { animation-delay: 14s; } |
|||
.TextShuffler .word:nth-child(16) { animation-delay: 15s; } |
|||
.TextShuffler .word:nth-child(17) { animation-delay: 16s; } |
|||
.TextShuffler .word:nth-child(18) { animation-delay: 17s; } |
|||
Revision as of 16:41, April 18, 2025
/* assembling piece by piece rn */
.TextShuffler {
position: relative;
font-size: 1.5rem;
letter-spacing: 2px;
width: 10ch;
height: 2.5em;
display: flex;
display: inline;
}
.TextShuffler .word {
top: 0;
left: 0;
opacity: 0;
animation: fadeInOut 10s infinite;
}
.TextShuffler .word:nth-child(1) { animation-delay: 0s; }
.TextShuffler .word:nth-child(2) { animation-delay: 1s; }
.TextShuffler .word:nth-child(3) { animation-delay: 2s; }
.TextShuffler .word:nth-child(4) { animation-delay: 3s; }
.TextShuffler .word:nth-child(5) { animation-delay: 4s; }
.TextShuffler .word:nth-child(6) { animation-delay: 5s; }
.TextShuffler .word:nth-child(7) { animation-delay: 6s; }
.TextShuffler .word:nth-child(8) { animation-delay: 7s; }
.TextShuffler .word:nth-child(9) { animation-delay: 8s; }
.TextShuffler .word:nth-child(10) { animation-delay: 9s; }
@keyframes fadeInOut {
0% { opacity: 0; transform: translateY(0.2em); }
10% { opacity: 1; transform: translateY(0); }
25% { opacity: 1; }
35% { opacity: 0; transform: translateY(-0.2em); }
100% { opacity: 0; }
}