Template:Text Shuffle/styles.css

/* turned into slop atp */

.TextShuffler {
  font-size: 1.9em;
  color: #ffffff;
  height: 2.0em;
  display: flex;
}

.TextShuffler .word {
  opacity: 0;
  animation: fadeCycle 28s 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: 2s; }
.TextShuffler .word:nth-child(3)  { animation-delay: 4s; }
.TextShuffler .word:nth-child(4)  { animation-delay: 6s; }
.TextShuffler .word:nth-child(5)  { animation-delay: 8s; }
.TextShuffler .word:nth-child(6)  { animation-delay: 10s; }
.TextShuffler .word:nth-child(7)  { animation-delay: 12s; }
.TextShuffler .word:nth-child(8)  { animation-delay: 14s; }
.TextShuffler .word:nth-child(9)  { animation-delay: 16s; }
.TextShuffler .word:nth-child(10) { animation-delay: 18s; }
.TextShuffler .word:nth-child(11) { animation-delay: 20s; }
.TextShuffler .word:nth-child(12) { animation-delay: 22s; }
.TextShuffler .word:nth-child(13) { animation-delay: 24s; }
.TextShuffler .word:nth-child(14) { animation-delay: 26s; }

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