title: How do I animate div with background image along curved path but stop at X percentage
body: <p>I have been able to animate a div with a background image as well as resize it along the path.  However, I am trying to get this CSS-based animation to stop at a certain percentage of the progress.  </p>
  
  <p>The premise is to visually show a student her/his progress of completing a varying number of tasks (8 of 12 complete. 68%).  That is not a problem with a straight progress bar, but I am looking to use an image of a mountain with a hiker moving along a path.  I can get the hiker image from start to end with the following code, but I need it to stop based on the progress of the student.</p>
  
  <p>I am trying to keep this as simple as I can, but do not have to use CSS.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.mtnBg
  {
      height:306px;
      width:450px;
      border:1px silver solid;
      background-image: url(https://comps.canstockphoto.com/mountain-with-trail-and-sun-retro-style-eps-vector_csp43572145.jpg);
      background-repeat: no-repeat;
      background-size: 100%;
      display:block;
      opacity:.18;
      z-index:-1;
  }
  
  
  .animSurround {
      margin:0;
      padding:0;
      height:32px;
      width:32px;
      display:block;
      position:relative;
      left:140px;
      bottom:50px;
      border:1px none black;
      animation: yAxis 2.8s 1 ease;
  
  }
  .anim {
      background-image: url(https://www.tenstickers.co.uk/wall-stickers/img/preview/hiker-icon-sticker-8451.png);
      background-repeat: no-repeat;
      min-height:32px;
      min-width:32px;
      background-size: 100%;
      animation-iteration-count:1;
      animation: zoom-move 2.8s ease 1;
      animation-fill-mode: forwards;
  }
  
  .anim::after {
      /* Render dot, and animate along Y-axis */
      min-height:96px;
      min-width:96px;
  }
  
  
  @keyframes zoom-move {
    0% {
      transform: scale(3) translateX(calc(0px)) translateY(0px);
      opacity: 0.50;
      border-radius:32px;
      background-color: rgba(256 , 256, 256, 1);
    }
    25% {
      transform: scale(2.6) translateX(60px) translateY(-19px);
      opacity: 1;
      border-radius:32px;
      background-color: rgba(256 , 256, 256, 1);
    }
    50% {
      transform: scale(1.7) translateX(68px) translateY(-50px);
      opacity: 1;
      border-radius:32px;
      background-color: rgba(256 , 256, 256, 1); 
      animation-play-state: paused;
    }
    93% {
      background-color: rgba(256 , 256, 256, 1);
    }
    99% {
      transform: scale(1.1) translateX(161px) translateY(-122px);
      opacity: 1;
      border-radius:32px;
      background-color: rgba(76, 175, 80, 1);
    }
    100% {
      transform: scale(1.1) translateX(161px) translateY(-122px);
      opacity: 1;
      border-radius:32px;
      background-color: rgba(76, 175, 80, 1);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="mtnBg"&gt;&lt;/div&gt;
  &lt;div class="animSurround"&gt;
      &lt;div class="anim"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any help would be appreciated.</p>