使用jQuery更改CSS动画速度时遇到问题

var inputElement = document.getElementById('sp');

inputElement.addEventListener('input', function() {
  var set = inputElement.value + 's';
  $("#figure svg .sleeve").css("animation-duration", set);
});

@keyframes flow {
  0% {
    stroke-dashoffset: 55px;
  }
  100% {
    stroke-dashoffset: 0px;
  }
}

#figure svg {
  animation: fadeopacity 1s 0.5s both, flow 5s infinite linear;
}

#figure svg .sleeve {
  stroke-width: 3;
  stroke-dasharray: 50px 5px;
  fill: none;
  color: #4792da;
  stroke: currentColor;
  animation-name: flow;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transition: all 0.3s;
  animation-play-state: running;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <section>
    <div id="figure" class="fig">
      <svg height="50" width="800">
        <line
          class="sleeve" x1="0" y1="20" x2="800" y2="20"
          style="stroke:rgb(255,0,0);stroke-width:2"
        />
      </svg>
    </div>
  </section>
  <input type="number" id="sp" min="0,1" max="2" step="0.1" value="0.1">
</div>