How to scroll from one div to another with duration (for ex. 500ms) on button click in horizontally scrollable container that has scroll snap property

Question

I want my container to scroll 320(child width) + 20(gap) = 340px when I click the button in 500ms duration like animating (not delay).

.Container {
  display: flex;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  position: relative;
  overflow-y: hidden;
  overflow-x: scroll;
  gap: 20px;
}

.Container>div {
  min-width: 200px;
  max-width: 200px;
  height: 100px;
  background-color: blue;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

<div class="Container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<button id="slider_button">Slide</button>