Template:Text Shuffle/styles.css

/* assembling piece by piece rn */


.TextShuffler {
  position: relative;
  font-size: 2rem;
  letter-spacing: 2px;
  width: 10ch;
  height: 2.5em;
  display: flex;
  display: inline;
}

.TextShuffler .word {
  top: 0;
  left: 0;
  opacity: 0;
  animation: fadeInOut 6s infinite;
}

.TextShuffler .word:nth-child(1) { animation-delay: 0s; }
.TextShuffler .word:nth-child(2) { animation-delay: 1s; }
.TextShuffler .word:nth-child(3) { animation-delay: 2s; }
.TextShuffler .word:nth-child(4) { animation-delay: 3s; }
.TextShuffler .word:nth-child(5) { animation-delay: 4s; }
.TextShuffler .word:nth-child(6) { animation-delay: 5s; }

@keyframes fadeInOut {
  0% { opacity: 0; transform: translateY(0.2em); }
  10% { opacity: 1; transform: translateY(0); }
  25% { opacity: 1; }
  35% { opacity: 0; transform: translateY(-0.2em); }
  100% { opacity: 0; }
}