Анимация ввода меняет положение каждый раз при изменении длины текста. ⇐ CSS

[Anonymous]

Моя анимация набора текста меняет положение каждый раз, когда длина текста, как я могу заставить ее оставаться на одном месте и просто выполнять анимацию?
Когда текст, который нужно набрать с помощью анимации, становится меньше, он перемещается в центр вправо и влево, когда текст находится в большем объеме.
видео https://streamable.com/62jzwg
css

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

.hometxt {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 1.4rem;
height: 50vh;
}
div.hometxt span{
position: relative;
}
.hometxt span::before{
content: "FrontEnd Developer";
font-size: 2.25rem;
font-weight: 500;
animation: text 20s infinite;
}
.hometxt span::after {
content: '';
position: absolute;
height: 3rem;
width: calc(100% + 0.8rem);
background-color:white;
border-left: 2px solid black;
animation: cursor 0.8s infinite, typing 20s steps(14) infinite;
right: -0.5rem;
}
@keyframes cursor {
To{
border-left: 2px solid transparent;
}
}
@keyframes text {
0%,20%{
content: "FrontEnd Developer";
}
21%,40%{
content: "PHP Developer";
}
41%,60%{
content: "React/Next Developer";
}
61%,80%{
content: "Web Designer";
}
81%,100%{
content: "Freelancer";
}
}
@keyframes typing {
10%,15%,30%,35%,50%,55%,70%,75%,90%,95%{
width: 0;
}
5%,20%,25%,40%,45%,60%,65%,80%,85%{
width: calc(100% + 0.8rem);
}
}

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

 
Hi, I am
Reyyan Yaqub

Я пытался добавить минимальный размер, но не помогло

Подробнее здесь: https://stackoverflow.com/questions/785 ... th-changes