如何使用css使打字机文本效果循环

<style>
    .typewriter {
        overflow: hidden; /* 隐藏超出容器的文本 */
        border-right: .15em solid orange; /* 添加光标效果 */
        white-space: nowrap; /* 禁止文本换行 */
        margin: 0 auto; /* 居中显示 */
        letter-spacing: .15em; /* 字符间距 */
        animation:
            typing 3.5s steps(40, end),
            blink-caret .75s step-end infinite;
    }

    @keyframes typing {
        from {
            width: 0;
        }
        to {
            width: 100%;
        }
    }

    @keyframes blink-caret {
        from,
        to {
            border-color: transparent;
        }
        50% {
            border-color: orange;
        }
    }
</style>

<div class="typewriter">
    <span>这是打字机效果的文本。</span>
</div>