輸入動畫時，光標離最后一個字母太遠

我正試圖在我的主頁有一個打字動畫，類似這樣的東西。

當我在自己的網站上查看結果時(目前在localhost上)，光標離最后一個字母太遠了，盡管我實際上希望它在句子結束后立即呈現和閃爍。我一直在擺弄我在代碼中給定的值，結果基本相同。奇怪的是，這只發生在我第一次在localhost上檢查它的時候，如果我刷新頁面，它從那時起就正常工作了。我真的不知道我做錯了什么，所以我會感謝任何提示或幫助。

提前感謝！

這是我的代碼:

code.html

<body>
<div id="intro">
<div class="txt">a passionate programmer</div>
</div>
</body>

code.css

.txt{
    background: none;
    font-family: 'VT323', monospace;    
    width: 23ch;
    animation: type 2.5s steps(26), blink .5s step-end infinite alternate;
    white-space: nowrap;
    overflow: hidden;
    border-right: 5px solid;
    color: #FAEFE8;
    /*font-family: Inconsolata;*/
   text-shadow: 0 0 30px #EE8742; 
    font-size: 55px;
    place-items: center;
    margin: 0 auto;
    margin-bottom: 20px;
  }
  
  @keyframes type{
    from{width: 0%}
  }
  
  @keyframes blink{
    50%{border-color: transparent}
  }

預期產出: enter image description here