Animation sequence for border in CSS [closed]

I am trying to create a typing animation effect in css, however I want the cursor (in my code , the border) to fade to white after the main typing animation is done but am not sure how to do this, I tried changing opacity but this just affected the background – any advice would be appreciated.I based my code off of this example https://www.youtube.com/watch?v=m0o0QNpY9-0. The main difference is that mine is for a single line
code snippet