键入效果与闪烁插入纯CSS问题

Question

我正在学习如何仅使用纯CSS为多行实现打字效果，但我遇到了一些困难。 1）键入单词后，闪烁的插入符号不会立即停止。它一直持续到div结束。 2）如何在完成后取下第一个闪烁的插入符号？

＆＃13;

＆＃13;

  .typing h1 {
            white-space: nowrap;
            overflow: hidden;
            letter-spacing: 0.5em;
            border-right: 1px solid orange;
            animation: typing 4s steps(40, end), blink-caret 0.75s step-end infinite;
        }

        .typing h1:nth-child(2) {
            opacity: 0;
            animation: typing2 4s steps(40, end), blink-caret 0.75s step-end infinite;
            animation-delay: 4.5s;
            animation-fill-mode: forwards;
        }

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

        @keyframes typing2 {
            from {
                width: 0;
                opacity: 1;
            }
            to {
                width: 100%;
                opacity: 1;
            }
        }
        /* The typewriter cursor effect */

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

＆＃13;

<div class="typing">
        <h1>First Line</h1>
        <h1>Second Line</h1>
    </div>

＆＃13;

＆＃13;

＆＃13;