Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
You must create an account or log in to edit.

Template:Text Shuffle/styles.css: Difference between revisions

Template page
Content deleted Content added
MMONTAGEe (talk | contribs)
wrong thing
MMONTAGEe (talk | contribs)
turned into slop atp
Line 1: Line 1:
/* assembling piece by piece rn */
/* turned into slop atp */
/* found some good tutorial but well lets see */


.TextShuffler {
.TextShuffler {
display: block;
font-size: 1.5em;
text-align: center;
animation: shuffleUp 8s steps(4, end) infinite;
color: cyan;
height: 1.5em;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
}


.TextShuffler > div {
.TextShuffler .word {
height: 1.5em;
opacity: 0;
animation: fadeCycle 8s linear infinite;
line-height: 1.5em;
text-align: center;
position: absolute;
transition: opacity 0.5s ease-in-out;
}
}


.TextShuffler .word:nth-child(1) { animation-delay: 0s; }
@keyframes shuffleUp {
.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); }
@keyframes fadeCycle {
100% { transform: translateY(0); }
0% { opacity: 0; }
5% { opacity: 1; }
25% { opacity: 1; }
30% { opacity: 0; }
100% { 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; }
}