如何通过循环切换它从右到左动画制作文本？

Question

当我说切割时，我正试图做这样的事情：

https://i.stack.imgur.com/44GvS.gif

.auto-scrolling-casing-category-main {
  overflow-x: hidden;
  width: 100%;
  height: auto;
  padding-top: 25px;
  padding-bottom: 5px;
  background-color: white;
  border: 1px solid #DCDCDC;
  margin-bottom: 10px;
}

.font-awesome-Caregory {
  margin-right: 45px;
  padding-left: 30px;
  float: right;
  text-align: center;
  cursor: pointer;
}

.font-awesome-Caregory p {
  white-space: nowrap;
}

.image-Category {
  margin-right: 45px;
  float: right;
  text-align: center;
  padding-left: 30px;
  cursor: pointer;
}

.image-Category p {
  padding-top: 2px;
  white-space: nowrap;
}

<div class="col-12">
  <div id="auto-scrolling-maind" class="auto-scrolling-casing-category-main d-flex">
    <div class="font-awesome-Caregory">
      <i class="fa fa-gift fa-3x center-block" aria-hidden="true"></i>
      <p> text</p>
    </div>
    <div class="image-Category">
      <img src="images/picture_1.jpg" height="40px" width="50px" alt="">
      <p class=""> text</p>
    </div>
    <div class="font-awesome-Caregory">
      <i class="fa fa-gift fa-3x center-block" aria-hidden="true"></i>
      <p>text</p>
    </div>
    <div class="image-Category text-center">
      <img src="images/picture_1.jpg" height="40px" width="50px" alt="">
      <p class="">text</p>
    </div>
    <div class="font-awesome-Caregory">
      <i class="fa fa-gift fa-3x center-block" aria-hidden="true"></i>
      <p>text</p>
    </div>
    <div class="image-Category">
      <img src="images/picture_1.jpg" height="40px" width="50px" alt="">
      <p class="">text</p>
    </div>
    <div class="font-awesome-Caregory">
      <i class="fa fa-gift fa-3x center-block" aria-hidden="true"></i>
      <p>text</p>
    </div>
    <div class="image-Category text-center">
      <img src="images/picture_1.jpg" height="40px" width="50px" alt="">
      <p class="">text</p>
    </div>
    <div class="font-awesome-Caregory">
      <i class="fa fa-gift fa-3x center-block" aria-hidden="true"></i>
      <p>text</p>
    </div>
    <div class="image-Category">
      <img src="images/picture_1.jpg" height="40px" width="50px" alt="">
      <p class="">text</p>
    </div>
    <div class="font-awesome-Caregory">
      <i class="fa fa-gift fa-3x center-block" aria-hidden="true"></i>
      <p>text</p>
    </div>
    <div class="image-Category">
      <img src="images/picture_1.jpg" height="40px" width="50px" alt="">
      <p class="">text</p>
    </div>
    <div class="font-awesome-Caregory">
      <i class="fa fa-gift fa-3x center-block" aria-hidden="true"></i>
      <p>text</p>
    </div>
    <div class="image-Category">
      <img src="images/picture_1.jpg" height="40px" width="50px" alt="">
      <p class="">text</p>
    </div>
    <div class="font-awesome-Caregory">
      <i class="fa fa-gift fa-3x center-block" aria-hidden="true"></i>
      <p>text</p>
    </div>
    <div class="image-Category">
      <img src="images/picture_1.jpg" height="40px" width="50px" alt="">
      <p class="">text</p>
    </div>
    <div class="font-awesome-Caregory">
      <i class="fa fa-gift fa-3x center-block" aria-hidden="true"></i>
      <p>text</p>
    </div>
    <div class="image-Category">
      <img src="images/picture_1.jpg" height="40px" width="50px" alt="">
      <p class="">text</p>
    </div>
    <div class="font-awesome-Caregory">
      <i class="fa fa-gift fa-3x center-block" aria-hidden="true"></i>
      <p>text</p>
    </div>
    <div class="image-Category">
      <img src="images/picture_1.jpg" height="40px" width="50px" alt="">
      <p class="">text</p>
    </div>
  </div>
</div>

谢谢你的回答！我真的需要帮助