Как заставить анимацию ввода не начинаться с самого начала? ⇐ CSS

[Anonymous]

Я пытаюсь создать эффект раскрытия текста, но сейчас текст начинается с самого начала. Как изменить его, чтобы текст начинался в центре и заканчивался в центре серого пузыря после анимации?



< div class="snippet-code">

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

.text-typing {
background: #f5f5f5;
border-radius: 2rem;
width: 25%;
margin: auto;
}

.text-typing h2 {
margin: 0px;
white-space: nowrap;
clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
animation: typing 4s steps(22, end) forwards, blink 1s infinite;
}

@keyframes typing {
0% {
width: 0%
}
100% {
width: 100%
}
}

@keyframes blink {
0%,
100% {
border-right: 2px solid transparent;
}
50% {
border-right: 2px solid #222;
}
}

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

Experience

Я пытался изменить саму анимацию, но не знаю, какую часть сделал бы так, чтобы оно начиналось не с самого начала.

Подробнее здесь: https://stackoverflow.com/questions/784 ... -beginning