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)
No edit summary
MMONTAGEe (talk | contribs)
No edit summary
Line 9: Line 9:
.TextShuffler .word {
.TextShuffler .word {
opacity: 0;
opacity: 0;
animation: fadeCycle 56s linear infinite;
animation: fadeCycle 52s linear infinite;
position: absolute;
position: absolute;
transition: opacity 0.8s ease-in-out;
transition: opacity 0.5s ease-in-out;
text-shadow: 0 0 5px;
pointer-events: none;
}
}


Line 18: Line 18:
.TextShuffler .word:nth-child(2) { animation-delay: 8s; }
.TextShuffler .word:nth-child(2) { animation-delay: 8s; }
.TextShuffler .word:nth-child(3) { animation-delay: 16s; }
.TextShuffler .word:nth-child(3) { animation-delay: 16s; }
.TextShuffler .word:nth-child(4) { animation-delay: 20s; }
.TextShuffler .word:nth-child(4) { animation-delay: 24s; }
.TextShuffler .word:nth-child(5) { animation-delay: 28s; }
.TextShuffler .word:nth-child(5) { animation-delay: 32s; }
.TextShuffler .word:nth-child(6) { animation-delay: 36s; }
.TextShuffler .word:nth-child(6) { animation-delay: 40s; }
.TextShuffler .word:nth-child(7) { animation-delay: 44s; }
.TextShuffler .word:nth-child(7) { animation-delay: 48s; }


@keyframes fadeCycle {
@keyframes fadeCycle {

Revision as of 18:30, April 18, 2025

/* turned into slop atp */

.TextShuffler {
  font-size: 1.4em;
  color: #ffffff;
  display: flex;
}

.TextShuffler .word {
  opacity: 0;
  animation: fadeCycle 52s linear infinite;
  position: absolute;
  transition: opacity 0.5s ease-in-out;
  pointer-events: none;
}

.TextShuffler .word:nth-child(1) { animation-delay: 0s; }
.TextShuffler .word:nth-child(2) { animation-delay: 8s; }
.TextShuffler .word:nth-child(3) { animation-delay: 16s; }
.TextShuffler .word:nth-child(4) { animation-delay: 24s; }
.TextShuffler .word:nth-child(5) { animation-delay: 32s; }
.TextShuffler .word:nth-child(6) { animation-delay: 40s; }
.TextShuffler .word:nth-child(7) { animation-delay: 48s; }

@keyframes fadeCycle {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  25%  { opacity: 1; }
  30%  { opacity: 0; }
  100% { opacity: 0; }
}