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

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.

question from:https://stackoverflow.com/questions/65903254/how-to-trigger-an-svg-stroke-dash-animation-on-page-load-refresh

Answer 1

Waitting for answers