Template:Text Shuffle/styles.css: Difference between revisions
Template page
More actions
Content deleted Content added
wrong thing |
turned into slop atp |
||
| Line 1: | Line 1: | ||
/* |
/* turned into slop atp */ |
||
/* found some good tutorial but well lets see */ |
|||
.TextShuffler { |
.TextShuffler { |
||
font-size: 1.5em; |
|||
text-align: center; |
|||
| ⚫ | |||
color: cyan; |
|||
| ⚫ | |||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
position: relative; |
|||
} |
} |
||
.TextShuffler |
.TextShuffler .word { |
||
opacity: 0; |
|||
| ⚫ | |||
| ⚫ | |||
position: absolute; |
|||
transition: opacity 0.5s ease-in-out; |
|||
} |
} |
||
.TextShuffler .word:nth-child(1) { animation-delay: 0s; } |
|||
| ⚫ | |||
.TextShuffler .word:nth-child(2) { animation-delay: 2s; } |
|||
0% { transform: translateY(0); } |
|||
.TextShuffler .word:nth-child(3) { animation-delay: 4s; } |
|||
25% { transform: translateY(-1.5em); } |
|||
.TextShuffler .word:nth-child(4) { animation-delay: 6s; } |
|||
50% { transform: translateY(-3em); } |
|||
75% { transform: translateY(-4.5em); } |
|||
| ⚫ | |||
| ⚫ | |||
0% { opacity: 0; } |
|||
5% { opacity: 1; } |
|||
25% { opacity: 1; } |
|||
30% { opacity: 0; } |
|||
| ⚫ | |||
} |
} |
||
Revision as of 17:34, April 18, 2025
/* turned into slop atp */
.TextShuffler {
font-size: 1.5em;
text-align: center;
color: cyan;
height: 1.5em;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.TextShuffler .word {
opacity: 0;
animation: fadeCycle 8s linear infinite;
position: absolute;
transition: opacity 0.5s ease-in-out;
}
.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; }
@keyframes fadeCycle {
0% { opacity: 0; }
5% { opacity: 1; }
25% { opacity: 1; }
30% { opacity: 0; }
100% { opacity: 0; }
}