I’d like to make a CSS animation where the timeline is based on the view of the element. However, it won’t work, I already searched for it but no results.

I want to make this arrow animation. I want it to be centered and align the three lines that make the arrow shape. I want it to be smooth.
I’d like the three lines (that make the arrow) to align perfectly and in the middle. Also I used the border of the lines container as reference but now if I remove it — all the lines are out of position.

I am trying to replicate the grid line animation effect seen on the Acertinity UI homepage using pure HTML, CSS, and JavaScript. Below is a GIF of the animation effect I am referring to:
[Image of the animation][1]