Template:Text Shuffle/styles.css: Difference between revisions
Template page
More actions
Content deleted Content added
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* assembling piece by piece rn */ |
/* assembling piece by piece rn */ |
||
/* found some good tutorial but well lets see */ |
|||
.TextShuffler { |
.TextShuffler { |
||
display: flex; |
|||
flex-direction: column; |
|||
display: grid; |
|||
| ⚫ | |||
| ⚫ | |||
height: 1.2em; |
|||
overflow: hidden; |
|||
} |
} |
||
.TextShuffler |
.TextShuffler > div { |
||
height: 1.5em; |
|||
display: flex; |
|||
| ⚫ | |||
| ⚫ | |||
justify-content: center; |
|||
} |
} |
||
| ⚫ | |||
.TextShuffler .word:nth-child(1) { animation-delay: 0s; } |
|||
| ⚫ | |||
.TextShuffler .word:nth-child(2) { animation-delay: 2s; } |
|||
| ⚫ | |||
.TextShuffler .word:nth-child(3) { animation-delay: 4s; } |
|||
| ⚫ | |||
.TextShuffler .word:nth-child(4) { animation-delay: 6s; } |
|||
60% { transform: translateY(-4.5em); } |
|||
.TextShuffler .word:nth-child(5) { animation-delay: 8s; } |
|||
80% { transform: translateY(-6em); } |
|||
.TextShuffler .word:nth-child(6) { animation-delay: 10s; } |
|||
100% { transform: translateY(0); } |
|||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
20% { opacity: 1; } |
|||
| ⚫ | |||
100% { opacity: 0; visibility: hidden; } |
|||
} |
} |
||
Revision as of 17:27, April 18, 2025
/* assembling piece by piece rn */
/* found some good tutorial but well lets see */
.TextShuffler {
display: flex;
flex-direction: column;
animation: scrollText 8s linear infinite;
}
.TextShuffler > div {
height: 1.5em;
display: flex;
align-items: center;
justify-content: center;
}
@keyframes scrollText {
0% { transform: translateY(0); }
20% { transform: translateY(-1.5em); }
40% { transform: translateY(-3em); }
60% { transform: translateY(-4.5em); }
80% { transform: translateY(-6em); }
100% { transform: translateY(0); }
}