ReactJS - CSS: моя анимация не может быть беглой

Question

Я пытаюсь запустить анимацию на ReactJS.Но моя анимация не может быть беглой.На самом деле это слайдер, но вместо того, чтобы непрерывно следовать по пути слайда, анимация перезапускается всегда до начала слайдера.

Я бы сделал анимацию плавной, а не перезапускать в начале, у меня естьубедитесь, что введены CSS-переменные, соответствующие текущей позиции моего слайда - см. выходные данные console.log.Так что я немного запутался в том, что пошло не так.

Вот песочница

Вот мой код

JS:

import React, { Component } from "react";
import ReactDOM from "react-dom";
import style from "./style.module.css";

class App extends Component {
  state = {
    viewIndex: 1,
    travelerIndex: 100,
    travelling: false
  };

  nextCarouselItem = () => {
    if (!(this.state.viewIndex <= 3)) {
      return;
    }
    var carousel = this.refs.carousel;
    var viewValue;
    this.setState(prevState => ({
      viewIndex: prevState.viewIndex + 1
    }));
    console.log("viewIndex: ", this.state.viewIndex);
    // -> removing the class
    carousel.classList.remove(style.carousel_animated);
    carousel.classList.remove(style.carousel);

    void carousel.offsetWidth;

    // -> and re-adding the class
    carousel.classList.add(style.carousel_animated);
    carousel.classList.add(style.carousel);

    console.log("viewIndex:", this.state.viewIndex);
    viewValue = -(this.state.viewIndex * this.state.travelerIndex);
    console.log("viewValue: ", viewValue);
    var body = document.body;

    var travelViewValue = viewValue + "vw";
    var currentPosition = -viewValue + "vw";
    console.log("travelViewValue= ", travelViewValue);
    body.style.setProperty("--travelViewValue", travelViewValue);
    body.style.setProperty("--current_position", currentPosition);
    console.log("css currentPostion: ", body.style);
    // carousel.style.animation = "travelView  1.5s  ease-out 0 forwards" ;

    console.log("carousel.classList: ", carousel.classList);

    this.setState({ travelling: true });
    // carousel.style.animationName= "travelView" ;
  };

  resetClass = () => {
    this.setState({ travelling: false });
    console.log("reset reached");
  };

  componentDidMount() {
    // var carousel = this.refs.carousel;
    // carousel.addEventListener('animationend', this.resetClass)
  }
  componentWillUnmount() {
    var carousel = this.refs.carousel;
    carousel.addEventListener("animationend", this.resetClass);
  }

  render() {
    return (
      <div className={style.App}>
          {/* <button id={style.prev_button}>left</button>
   currently I test only the right button, I will see later for the left */}
        <div ref="carousel" className={style.carousel}>
          <div ref="firstCarouselItem" name="0" id={style.carousel_item_one}>
            carousel_item_1
          </div>
          <div ref="secondCarouselItem" name="1" id={style.carousel_item_two}>
            carousel_item_2
          </div>
          <div ref="thirdCarouselItem" name="2" id={style.carousel_item_three}>
            carousel_item_3
          </div>
        </div>
        <button onClick={this.nextCarouselItem} id={style.next_button}>
          right
        </button>
      </div>
    );
  }
}

export default App;

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

CSS:

body {
  /* --traveler_index: 100; */
  --current_position: 0;
  --travelViewValue: 0;
  /* --nextViewValue:0;  */
}

.App {
  width: 100vw;
  overflow: hidden;
}

.carousel {
  display: flex;
  width: 300vw;
  height: 100vh;
  transform: translate(--current_position);
  /* transform: translate(-100vw); */
  /* animation: travelView  1.5s  ease-out forwards ; */
}

.carousel_animated {
  display: flex;
  width: 300vw;
  height: 100vh;
  transform: translate(--current_position);
  animation: travelView 1.3s cubic-bezier(0, 0.73, 0.5, 0.95) 0s 1 normal
    forwards;
  /* height: 25vh; */
}

@keyframes travelView {
  to {
    transform: translate(var(--travelViewValue));
    /* transform: translate(-100vw) */
  }
}

#carousel_item_one {
  width: 100vw;
  height: 100%;
  background-color: yellow;
}

#carousel_item_two {
  width: 100vw;
  height: 100%;
  background-color: rgb(255, 94, 0);
}

#carousel_item_three {
  width: 100vw;
  height: 100%;
  background-color: rgb(9, 255, 0);
}

#prev_button {
  position: absolute;
  z-index: 100;
  left: 5vw;
  top: 50%;
}
#next_button {
  position: absolute;
  right: 5vw;
  top: 50%;
}

button:hover {
  cursor: pointer;
}

Любой намек был бы хорош,

спасибо