CSSタイピングの効果

Question

私はCSSで複数の行でタイピング効果を達成しようとしています。今私の望ましい効果は、最初のborder-rightの可視性を最初に点滅するカーソルのアニメーションが終了後に非表示にすることである

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>