JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header_mid">
      <div class="logo_slide" >
      
      
          <ul class=loop>
            <li class="logo_item"><a href="https://www.webmoney.ru/"><img src="/images/logos/wm.png" alt="WebMoney logo" /></a>
            <li class="logo_item"><a href="https://perfectmoney.is/"><img src="/images/logos/perfect-money.png" alt="PerfectMoney logo" /></a>
            <li class="logo_item"><a href="https://qiwi.com/"><img src="/images/logos/qiwi.png" alt="Qiwi logo" /></a>
          </ul>
          
          
          <ul class=loop-clone>
            <li class="logo_item"><a href="https://www.webmoney.ru/"><img src="/images/logos/wm.png" alt="WebMoney logo" /></a>
            <li class="logo_item"><a href="https://perfectmoney.is/"><img src="/images/logos/perfect-money.png" alt="PerfectMoney logo" /></a>
            <li class="logo_item"><a href="https://qiwi.com/"><img src="/images/logos/qiwi.png" alt="Qiwi logo" /></a>
          </ul>
          
          
      </div>
      <div class="clear"></div>
    </div>

CSS

.header_mid {
  height: 100px;
}
.header_mid .logo_slide {
	padding: 25px 0;
	height: 50px;
	/*overflow: hidden;*/
	position: relative;
  width:200px;
  margin: auto;
  border:1px solid red;
}
.loop, .loop-clone {
  display: block;
  width: 200%;
  height: 50px;

  position: absolute;
  overflow: hidden;
  
  padding:0;
  margin:0;
  list-style: none;
  border:1px solid green;

}
.loop {
  animation: marquee 10s linear infinite;
}
.loop-clone {
  border:1px solid blue;
  animation: marquee-clone 10s linear infinite;
}


.header_mid .logo_slide .logo_item {
	height: 50px;
  padding: 0 20px;
  float: left;
}
@keyframes marquee {
  0% { left: 0; }
  50% { left: -200%; }
  50.001% { left: 200%; }
  100% { left: 0; }
}
@keyframes marquee-clone {
  0% { left: 200%; }
  50% { left: 0; }
  100% { left: -200%; }
}

.header_mid .logo_slide:hover ul,.header_mid .logo_slide .loop-clone ul {
	animation-play-state: paused;
}