在css動畫結束時停止閃爍的光標

Question

我們嘗試了很多不起作用的東西。我有一個閃爍光標的CSS動畫。我正在嘗試在我正在開發的這個遊戲中使用它。

鏈接到遊戲的視覺參考：https://code.sololearn.com/WF65X6DEns7o/#css

+++

所以這裏是一個問題

HTML代碼：

<div id = "Header"> <b>Real Estate Agent</b> </div> 

CSS：

#Header{ 
font-size:50px; color:darkOrange; text-shadow:3px 3pxblack; 
overflow:hidden; 
letter-spacing: .15em; 
animation: typing 3.5s steps(60, end), blink-caret .65s step-end infinite; 
white-space: nowrap; 
border-right: .15em solid orange; 
width:500px; 
} 

@keyframes typing { 
    from { width: 0 } 
    to { width: 500px } 
    } 

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

+++++++++++++

當前光標閃爍，直到所有文本輸入完畢，然後在文字的末尾閃爍。

如何讓光標在動畫結束時停止閃爍並停止動畫循環。

正如我所說我已經嘗試了幾件事情，沒有任何工作。

感謝

Answer 1

與更換infinite與8（實驗值根據您的喜好）並設置初始值邊框的顏色爲transparent。

animation: typing 3.5s steps(60, end), blink-caret .65s step-end 8; 
white-space: nowrap; 
border-right: .15em solid transparent; 

這樣它會閃爍8次然後變得不可見。

Answer 2

從動畫的#header刪除單詞infinite：

animation: typing 3.5s steps(60, end), blink-caret .65s step-end; 

Answer 3

嘗試這樣除去infinite：

animation: typing 3.5s steps(60, end), blink-caret .65s step-end; 

Answer 4

試試這個：

#Header{ 
    font-size:50px; color:darkOrange; text-shadow:3px 3px black; overflow: hidden; letter-spacing: .15em; 
    animation: typing 3.5s steps(60, end), blink-caret .65s step-end 5; white-space: nowrap; 
    width:500px; 
} 

@keyframes typing { 
    from { width: 0 } 
    to { width: 500px } 
} 

@keyframes blink-caret { 
    from, to { border-color: transparent; } 
    50% { border-right: .15em solid orange; } 
}