animation slide reverse css

scrollable.css

* {
  box-sizing: content-box
}
.main {
  width: 100%;
  margin: 0 auto;
  display: flex;
  border:1px solid #ccc;
}
.left, .right {
  width: 30px;
  background: #ccc;
  display: flex;
  cursor:pointer;
  align-items: center;
  justify-content: center;
}
.scrollable {
  scroll-behavior: smooth;
  overflow-x: hidden;
  width: calc(100% - 60px);
}
.center {
  width: 100%;
  white-space:nowrap;
  will-change: transform;
}
.center.ao {
  animation: balanco 15s linear infinite alternate-reverse;
}

@keyframes balanco {
  from {
    transform: translateX(var(--diff));
  }
  to {
    transform: translateX(0);
  }
}

span {
  padding: 5px 10px;
  display: inline-flex;
  text-align: center;
  border-right:1px solid #ccc
}
span.active {
  background: #08C3
}
::-webkit-scrollbar {
  background: #d7d7d7;
  height: 7px
}
::-webkit-scrollbar-thumb {
  background: #909090;
}

scrollable.html

<div class="main" >
  <div class="left">&lt;</div>
  <div class="scrollable">
    <div class="center">
      <span>1 agora sim</span>
      <span>2 ew sim</span>
      <span>3sim</span>
      <span>5 agora sim</span>
      <span>6 agora sim</span>
      <span>7 agora sim</span>
      <span>8 agora sim</span>
      <span>9 agora sim</span>
      <span>10 agora sim</span>
      <span>11 agora sim</span>
      <span>12 agora sim</span>
      <span>13 agora sim</span>
      <span>14 agora sim</span>
      <span>15 agora sim</span>
      <span>16 agora sim</span>
      <span>17 agora sim</span>
      <span>18 agora sim</span>
      <span>19 agora sim</span>
      <span>20 end</span>
    </div>
  </div>
  <div class="right">&gt;</div>
</div>

scrollable.js

const main = document.querySelector('.main');
const prev = document.querySelector('.left');
const next = document.querySelector('.right');
const scroll = document.querySelector('.center');
const scrollable = document.querySelector('.scrollable');
const spans = [...scroll.getElementsByTagName('span')]

let diff = calculateDiff();



function calculateDiff() {
  const cw = scroll.clientWidth;
  const cs = scroll.scrollWidth;
  const value = (cs - cw);
  document.querySelector('html').style.setProperty('--diff', -value + 'px');

  return value
}

function autoSlide() {
  scroll.classList.add('ao');
}

function onScroll(dir) {
  // get current translate: matrix
  // console.log(window.getComputedStyle(scroll).getPropertyValue('transform'))
  if (dir == 'prev') {
    (scroll.scrollLeft = scroll.scrollLeft - scroll.clientWidth / 2)
  }
  else {
    (scroll.scrollLeft = scroll.scrollLeft + scroll.clientWidth / 2)
  }

}

prev.addEventListener('click', function () {
  onScroll('prev')
})

next.addEventListener('click', function () {
  onScroll('next')
})

scroll.addEventListener('click', function (e) {
  spans.forEach(span => span.classList.remove('active'))
  e.target.classList.add('active');
})

main.addEventListener('mouseover', function () {
  // console.log(window.getComputedStyle(scroll).getPropertyValue('transform'))
  scroll.style.animationPlayState = 'paused'
})

main.addEventListener('mouseout', function () {
  scroll.style.animationPlayState = 'running'
})

autoSlide();