title: How can you keep an animation from a navbar-element on the last keyframe while on the current page?
body: <p>I have a custom animation that when you hover a link a line flows from left to right (See example: <a href="https://jsfiddle.net/mxfiddle/fubLo45j/2/" rel="nofollow noreferrer">https://jsfiddle.net/mxfiddle/fubLo45j/2/</a>).</p>
  <p>I want the line to stay for the current page I am on.</p>
  <p>I am totally new to web development in general so any help would be much appreciated.</p>
  <p>Thanks in advance.</p>
  <p>My code for adding an active class:</p>
  <pre><code>// Get the container element
  var navbarContainer = document.getElementById(&quot;navbar&quot;);
  
  // Get all navbar elements with class=&quot;navElement&quot; inside the container
  var navElement = navbarContainer.getElementsByClassName(&quot;navElement&quot;);
  
  // Loop through the navbar elements and add the active class to the current/clicked button
  for (var i = 0; i &lt; navElement.length; i++) {
    navElement[i].addEventListener(&quot;click&quot;, function() {
      var current = document.getElementsByClassName(&quot;active&quot;);
      current[0].className = current[0].className.replace(&quot; active&quot;, &quot;&quot;);
      this.className += &quot; active&quot;;
    });
  }
  </code></pre>