CSS打字效果

Question

我正試圖用CSS中的多行實現打字效果。

這是一個很好的參考點我也跟着：

CSS animated typing

https://css-tricks.com/snippets/css/typewriter-effect/

現在我想要的效果是一旦第一閃爍光標的動畫結束第一右邊框的可見性被隱藏。在動畫結束後，邊界右側仍然在屏幕上，我希望它不可見。 （就像按下鍵盤上的按鈕一樣。）我會怎麼做？

https://jsfiddle.net/6567onn8/5/

.typewriter h1 { 
 
    text-align: center; 
 
    overflow: hidden; 
 
    font-size: 100%; 
 
    border-right: .15em solid #fff; 
 
    white-space: nowrap; 
 
    /* keeps content in one line */ 
 
    letter-spacing: .15em; 
 
    animation: typing 2.5s steps(22, end), blink-caret .75s step-end; 
 
} 
 
.typewriter h2 { 
 
    font-size: 100%; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    border-right: .15em solid black; 
 
    -webkit-animation: typing 2s steps(26, end), blink-caret 1s step-end infinite; 
 
    -webkit-animation-delay: 3s; 
 
    -webkit-animation-fill-mode: both; 
 
    -moz-animation: typing 2s steps(26, end), blink-caret 1s step-end infinite; 
 
    -moz-animation-delay: 3s; 
 
} 
 
/* The typing effect */ 
 

 
@keyframes typing { 
 
    from { 
 
    width: 0 
 
    } 
 
    to { 
 
    width: 9em; 
 
    } 
 
} 
 
@keyframes blink-caret { 
 
    from, to { 
 
    border-color: transparent 
 
    } 
 
    50% { 
 
    border-color: #000; 
 
    } 
 
}

<div class="typewriter"> 
 
    <h1>Hi. I'm Andy.</h1> 
 
    <h2>I love learning.</h2> 
 
</div>

Answer 1

就掏出infinite

.typewriter h1 { 
 
    text-align: center; 
 
    overflow: hidden; 
 
    font-size: 100%; 
 
    border-right: .15em solid #fff; 
 
    white-space: nowrap; 
 
    /* keeps content in one line */ 
 
    letter-spacing: .15em; 
 
    animation: typing 2.5s steps(22, end), blink-caret .75s step-end; 
 
} 
 
.typewriter h2 { 
 
    font-size: 100%; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    border-right: .15em solid black; 
 
    -webkit-animation: typing 2s steps(26, end), blink-caret 1s step-end; 
 
    -webkit-animation-delay: 3s; 
 
    -webkit-animation-fill-mode: both; 
 
    -moz-animation: typing 2s steps(26, end), blink-caret 1s step-end; 
 
    -moz-animation-delay: 3s; 
 
} 
 
/* The typing effect */ 
 

 
@keyframes typing { 
 
    from { 
 
    width: 0 
 
    } 
 
    to { 
 
    width: 9em; 
 
    } 
 
} 
 
@keyframes blink-caret { 
 
    from, to { 
 
    border-color: transparent 
 
    } 
 
    50% { 
 
    border-color: #000; 
 
    } 
 
}

<div class="typewriter"> 
 
    <h1>Hi. I'm Andy.</h1> 
 
    <h2>I love learning.</h2> 
 
</div>