How to trigger an SVG Stroke-Dash animation on page load/Refresh - html

Question

I'm trying to get a hover animation that is functioning correctly, to fire once when the page loads AND refreshes. It does appear to fire on INTIAL load but when I visit another section of the site and return, the animation does not fire again(hover continues to work). I know I need to use keyframes but i'm having trouble implementing it. The hover animation works perfectly, just not the keyframes for page load.
The SVG in HTML
<svg id="stroke" xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<defs>
<path id="line" d="M2 2c49.7 2.6 50 3.1 100 1.7-46.5 2-93 4.4-139.2 7.3 45.2-1.5 90.6-1.8 135.8-.6" fill="none" stroke-linecap="round" stroke-linejoin="round" vector-effect="non-scaling-stroke"/>
</defs>
</svg>
<div class="home-body ">
<p class = 'entry-content'>My name is
<span class="first-name">
Hunter
<svg class="button-stroke" viewBox="0 0 154 5">
<use href="#line"></use>
</svg>
<svg class="button-stroke" viewBox="0 0 154 5">
<use href="#line"></use>
</svg>
</span><br></p>
CSS
.first-name {
display: inline-block;
color: white;
min-width: 154px;
text-decoration: none;
position: relative;
font-weight: bold;
}
.first-name:hover .button-stroke:nth-child(2) {
animation: strokeAnimation 1s ease-out;
stroke-dashoffset: 0;
}
.button-stroke:nth-child(2) {
animation: strokeAnimation 1s ease-out;
stroke-dasharray: 650px;
stroke-dashoffset: 650px;
stroke: #0d1117;
stroke-width: 5;
-webkit-transition: stroke-dashoffset 900ms ease-out;
transition: stroke-dashoffset 900ms ease-out;
}
.button-stroke {
display: block;
width: calc(100% - 40px);
height: 10px;
stroke: #ffcb47;
position: absolute;
stroke-width: 2;
}
#-webkit-keyframes strokeAnimation {
from {
stroke-dashoffset: 0;
stroke-dasharray: 650px;
stroke-dashoffset: 650px;
}
to {
stroke-dashoffset: 100%;
stroke-dasharray: 0px;
stroke-dashoffset: 0px;
}
}
#keyframes strokeAnimation {
from {
stroke-dashoffset: 0;
stroke-dasharray: 650px;
stroke-dashoffset: 650px;
}
to {
stroke-dashoffset: 100%;
stroke-dasharray: 0px;
stroke-dashoffset: 0px;
}
}
As you can see the animation does look like it is starting to trigger but backwards and then it flickers.