``````
<!-- 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;
}

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

### External CSS

This Pen doesn't use any external CSS resources.

### External JavaScript

This Pen doesn't use any external JavaScript resources.