打字动画随文本长度偏移，如何固定其位置？

问题描述 #

我的打字动画会随文本长度变化改变位置：文本较短时向右偏移，较长时向左偏移。我希望让它固定在同一位置，仅执行打字动画效果，尝试添加min-width属性但没有效果。

现有代码 #

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);
    }
}

HTML代码 #

<div class="hometxt">
  <h1>Hi, I am</h1>
  <p>Reyyan Yaqub</p>
  <span></span>
</div>

解决方案 #

问题根源是span元素的宽度会随伪元素内容动态变化，导致光标定位偏移。需要给span设置固定宽度（取所有文本中最长项的宽度），并调整光标定位逻辑：

修改后的CSS代码 #

.hometxt {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1.4rem;
    height: 50vh;
}
div.hometxt span{
    position: relative;
    /* 固定宽度：取最长文本"React/Next Developer"的宽度，可根据实际字体微调 */
    width: 28rem;
    /* 文本左对齐，确保所有内容从容器左侧起始 */
    text-align: left;
}
.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属性 */
    left: 0;
}
@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);
    }
}

修改说明 #

1. 固定容器宽度：给span设置固定宽度，确保容器尺寸不随文本内容变化，从根源避免偏移。
2. 文本左对齐：通过text-align: left让所有文本从容器左侧起始，消除短文本因居中产生的右偏。
3. 调整光标定位：将光标伪元素的right定位改为left:0，让光标始终从容器左侧开始渲染，配合打字动画实现固定位置的打字效果。

内容的提问来源于stack exchange，提问作者Ch Reyyan Gujjar