Animate image same position back forword

by lemon kazi

HTML

<div class="container">
  <div class="row">
    <div class="col-lg-6 col-md-12">
      <div class="banner-content text-left">

      </div>
    </div>
    <div class="col-lg-6 aa">
      <div class="image_animate ">
        <img src="https://demo.themexbd.com/rtl/dizital/wp-content/uploads/2021/09/slider-side-thumb-03.png" alt="">
      </div>
    </div>
  </div>
  <div class="sliding_elements">
    <div class="sliding_image ">
      <img src="https://demo.themexbd.com/rtl/dizital/wp-content/uploads/2021/09/slider-side-thumb-01.png" alt="">
    </div>
    <div class="sliding_image second">
      <img src="https://demo.themexbd.com/rtl/dizital/wp-content/uploads/2021/09/slider-side-thumb-02.png" alt="">
    </div>
  </div>
</div>

CSS

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  max-width: 1140px;

  position: relative;
}

.row {
  width: 100%;
  float: left;
}

.col-lg-6 {
  position: relative;
  width: 50%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
  float: left;
}





.image_animate {
  width: 100%;
  will-change: transform;
  background: transparent;
  position: relative;
  float: right;

  animation: witr_abmovetb_box15 3s linear 2s infinite alternate running;
  transform-style: preserve-3d;
  will-change: transform;
  z-index: 10;
}


.image_animate img {
  width: 100%;
}

.col-lg-6.aa {
  float: right;
}

.sliding_elements {
  position: relative;
  width: 80%;
  float: left;
  margin: 0 auto;
  top: 0%;
  left: 17%;
  z-index: 10;
  float: left;
  min-height: 154px;
}

.sliding_image {
  width: 17%;
  height: 22%;
  will-change: transform;
  background: transparent;
  position: absolute;
  top: -3%;
  left: 0%;
  animation: witr_movelr_box45 5s linear 1s infinite alternate running;
  transform-style: preserve-3d;
  will-change: transform;
  z-index: 10;
}

.sliding_image img {
  width: 100%;
}

.sliding_image.second {
  width: 43%;
  height: 22%;
  top: -38%;
  left: 27%;
}

@keyframes witr_abmovetb_box15 {

  0% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px)
  }

  100% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px)
  }
}


@-webkit-keyframes witr_movelr_box45 {

  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }

  100% {
    -webkit-transform: translateX(45px);
    transform: translateX(45px)
  }
}

@keyframes witr_movelr_box45 {

  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }

  100% {
    -webkit-transform: translateX(45px);
    transform: translateX(45px)
  }
}

JavaScript

jQuery(document).ready(function($) {


});