在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; } 
}