Template:Text Shuffle/styles.css

/* assembling piece by piece rn */


.TextShuffler {
  font-size: 1.5em;
  display: grid;
  place-items: center;
  height: 1.2em;
  overflow: hidden;
}

.TextShuffler .word {
  opacity: 0;
  visibility: hidden;
  animation: fadeWord 8s linear infinite;
}

.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; }

@keyframes fadeWord {
  0%   { opacity: 0; visibility: hidden; transform: translateY(0.5em); }
  5%   { opacity: 1; visibility: visible; transform: translateY(0); }
  20%  { opacity: 1; }
  25%  { opacity: 0; visibility: hidden; transform: translateY(-0.5em); }
  100% { opacity: 0; visibility: hidden; }
}