CSS 打字机效果从 Middle/Right 开始向左

Question

对于我的网站，我正在为页面标题制作打字机效果。它 half-way 完成了，但它没有按照我想要的方式工作。打字机效果从中间开始，同时向左和向右“打字”。它打算从左边开始，在右边结束，但它不起作用。我怎样才能使它成为预期的样子？

.line {
    width: 40em;
    border-right: 2px solid rgba(255, 255, 255, 0.75);
    font-size: 100%;
    text-align: center;
    position: relative;
    top: 15%;
    margin: 0 auto;
    margin-top: 260px;
    white-space: nowrap;
    overflow: hidden;
}

.anim-typewriter {
    animation: typewriter 4s steps(40) 1s 1 normal both,
    blinkTextCursor 500ms steps(40) infinite normal;
}

@keyframes typewriter {
    from {
        width: 0;
    }
    to {
        width: 40em;
    }
}

@keyframes blinkTextCursor {
    from {
        border-right-color: rgba(255, 255, 255, 0.75);
    }
    to {
        border-right-color: transparent;
    }
}

<div class="d-flex justify-content-center head line anim-typewriter">
    <h1><b>Maintain the best Example Server.</b></h1>
</div>

Answer 1

希望这是您的正确答案。只需删除 text-align: middle;

.line {
    width: 40em;
    border-right: 2px solid rgba(255, 255, 255, 0.75);
    font-size: 100%;
    // remove this: text-align: center;
    position: relative;
    top: 15%;
    margin: 0 auto;
    margin-top: 260px;
    white-space: nowrap;
    overflow: hidden;
}

或者可能发生的事情来自 class：justify-content-center

<div class="d-flex justify-content-center head line anim-typewriter">
                     ^^^^^^^^^^^^^^^^^

CSS 打字机效果从 Middle/Right 开始向左

CSS Typewriter Effect Starting from the Middle/Right to Left

html

javascript

css

ejs

flexbox