<!-- Each letter animates together all at once  -->
<div class="sentence sentence-1">
  <span class="letter"> 
    Play more with delay
  </span>
</div>

<!-- A linear delay; second letter is delayed 2n seconds, third is delayed 3n seconds, etc. -->
<div class="sentence sentence-2">    
  <span class="letter">P</span><span class="letter">l</span><span class="letter">a</span><span class="letter">y</span> 
  <span class="letter">m</span><span class="letter">o</span><span class="letter">r</span><span class="letter">e</span>
  <span class="letter">w</span><span class="letter">i</span><span class="letter">t</span><span class="letter">h</span>
  <span class="letter">d</span><span class="letter">e</span><span class="letter">l</span><span class="letter">a</span><span class="letter">y</span>
</div>

<!-- A quadratic delay; each letter's delay grows by the power of two -->
<div class="sentence sentence-3">    
  <span class="letter">P</span><span class="letter">l</span><span class="letter">a</span><span class="letter">y</span>
  <span class="letter">m</span><span class="letter">o</span><span class="letter">r</span><span class="letter">e</span>
  <span class="letter">w</span><span class="letter">i</span><span class="letter">t</span><span class="letter">h</span>
  <span class="letter">d</span><span class="letter">e</span><span class="letter">l</span><span class="letter">a</span><span class="letter">y</span>
</div>

<!-- A cubic delay; each delay increases by the power of three  -->
<div class="sentence sentence-4">    
  <span class="letter">P</span><span class="letter">l</span><span class="letter">a</span><span class="letter">y</span>
  <span class="letter">m</span><span class="letter">o</span><span class="letter">r</span><span class="letter">e</span>
  <span class="letter">w</span><span class="letter">i</span><span class="letter">t</span><span class="letter">h</span>
  <span class="letter">d</span><span class="letter">e</span><span class="letter">l</span><span class="letter">a</span><span class="letter">y</span>
</div>

<!-- A backwards quadratic delay  -->
<div class="sentence sentence-5">    
  <span class="letter">P</span><span class="letter">l</span><span class="letter">a</span><span class="letter">y</span>
  <span class="letter">m</span><span class="letter">o</span><span class="letter">r</span><span class="letter">e</span>
  <span class="letter">w</span><span class="letter">i</span><span class="letter">t</span><span class="letter">h</span>
  <span class="letter">d</span><span class="letter">e</span><span class="letter">l</span><span class="letter">a</span><span class="letter">y</span>
</div>

<!-- A delay that makes the letters appear from the inside out. Don't ask me how I did it; I just played with numbers until this happened. -->
<div class="sentence sentence-6">    
  <span class="letter">P</span><span class="letter">l</span><span class="letter">a</span><span class="letter">y</span>
  <span class="letter">m</span><span class="letter">o</span><span class="letter">r</span><span class="letter">e</span>
  <span class="letter">w</span><span class="letter">i</span><span class="letter">t</span><span class="letter">h</span>
  <span class="letter">d</span><span class="letter">e</span><span class="letter">l</span><span class="letter">a</span><span class="letter">y</span>
</div>

:root {
  font-family: 'Asap', sans-serif;
}

html, body {
  height: 100%;
  background: #fcfcfc;
}

body {
  display: grid;
  place-content: center;
}

.sentence {
  font-size: clamp(1.5rem, calc(1rem + 3vw), 4rem);
  overflow: visible;
  padding: 0.5em;
}

.letter {
  opacity: 0;
  transform: translateY(-0.25em);
  display: inline-block;
  animation: burst_in 3s cubic-bezier(0, 1.62, 1, 1.6) infinite;
  color: #101820;
}

@keyframes burst_in {
  25%, 80% {
    opacity: 1;
    transform: translateY(0);
  }
}

@for $i from 1 through 17 {
  .sentence-2 .letter:nth-of-type(#{$i}) {
    animation-delay: $i * 0.06s;
  }
  .sentence-3 .letter:nth-of-type(#{$i}) {
    animation-delay: ($i * $i * 0.0035s);
  }
  .sentence-4 .letter:nth-of-type(#{$i}) {
    animation-delay: $i * $i * $i * $i * 0.0000075s;
  }
  .sentence-5 .letter:nth-of-type(#{$i}) {
    animation-delay: ((17 - ($i * $i)) * 0.0025s) + 0.55s;
  }
  .sentence-6 .letter:nth-of-type(#{$i}) {
    animation-delay: ($i / 17 * ($i - 17) * 0.1s) + 0.3s;
  }
}