Как оптимизировать анимацию, которая использует Nth-Child ⇐ CSS

[Anonymous]

Я использую псевдо-класс Nth-Child для анимации, которая заставляет текст выглядеть так, как будто его печатается. Каждый раз, когда используется Nth-Child, он используется для задержки анимации на этой букве. Учитывая, что я собираюсь использовать это для более длинных последовательностей текста, чем просто «пример текста» здесь, и время задержки увеличивается в постоянном шаблоне, мне было интересно, есть ли способ оптимизировать это, поэтому мне не приходится иметь дело с написанием почти то же самое 30 раз? Заранее спасибо! < /P>

Код: Выделить всё

const typeDiv = document.getElementById("typer");

typeDiv.addEventListener("animationend", whenEnd);

function whenEnd() {
document.getElementById("typer").style.color = "black";
}< /code>
#typer span {
animation-name: typing;
animation-duration: 2s;
animation-iteration-count: 1;
}

#typer span:nth-child(1) {
animation-delay: 0s;
}

#typer span:nth-child(2) {
animation-delay: 0.2s;
}

#typer span:nth-child(3) {
animation-delay: 0.4s;
}

#typer span:nth-child(4) {
animation-delay: 0.6s;
}

#typer span:nth-child(5) {
animation-delay: 0.8s;
}

#typer span:nth-child(6) {
animation-delay: 1s;
}

#typer span:nth-child(7) {
animation-delay: 1.2s;
}

#typer span:nth-child(8) {
animation-delay: 1.4s;
}

#typer span:nth-child(9) {
animation-delay: 1.6s;
}

#typer span:nth-child(10) {
animation-delay: 1.8s;
}

#typer span:nth-child(11) {
animation-delay: 2s;
}

@keyframes typing {

0%,
98% {
color: transparent;
}

100% {
color: black;
}
}< /code>

Sample Text

Подробнее здесь: https://stackoverflow.com/questions/795 ... -nth-child