Template:Text Shuffle/styles.css: Difference between revisions
Template page
More actions
Content deleted Content added
No edit summary |
wrong thing |
||
| Line 3: | Line 3: | ||
.TextShuffler { |
.TextShuffler { |
||
display: |
display: block; |
||
| ⚫ | |||
flex-direction: column; |
|||
| ⚫ | |||
} |
} |
||
.TextShuffler > div { |
.TextShuffler > div { |
||
height: 1.5em; |
height: 1.5em; |
||
line-height: 1.5em; |
|||
text-align: center; |
|||
justify-content: center; |
|||
} |
} |
||
@keyframes |
@keyframes shuffleUp { |
||
0% { transform: translateY(0); } |
0% { transform: translateY(0); } |
||
25% { transform: translateY(-1.5em); } |
|||
50% { transform: translateY(-3em); } |
|||
75% { transform: translateY(-4.5em); } |
|||
80% { transform: translateY(-6em); } |
|||
100% { transform: translateY(0); } |
100% { transform: translateY(0); } |
||
} |
} |
||
Revision as of 17:30, April 18, 2025
/* assembling piece by piece rn */
/* found some good tutorial but well lets see */
.TextShuffler {
display: block;
animation: shuffleUp 8s steps(4, end) infinite;
}
.TextShuffler > div {
height: 1.5em;
line-height: 1.5em;
text-align: center;
}
@keyframes shuffleUp {
0% { transform: translateY(0); }
25% { transform: translateY(-1.5em); }
50% { transform: translateY(-3em); }
75% { transform: translateY(-4.5em); }
100% { transform: translateY(0); }
}