*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
body{
  background:#f2f2f2;
}
@keyframes slide{
  from{
    transform:translateX(0) ;
    
  }
  to{
    transform:translateX(-100%) ;
  
  }
}
.logos{
  overflow:hidden;
  padding:60px 0 ;
  background:white;
  white-space:nowrap;
  position:relative;
}

.logos:before,
.logos:after{
  content:"";
  position:absolute;
  top:0;
  width:250px;
  height:100%;
  z-index:2;
}
.logos:before{
  left:0;
  background:linear-gradient(to left, rgba(255,255,255,0), white);
}
.logos:after{
  right:0;
  background:linear-gradient(to right, rgba(255,255,255,0), white);
}


.logos:hover .logos-slide{
  animation-play-state:paused;
  
  
}
.logos-slide{
  display:inline-block;
  animation: 35s slide infinite linear;
}
.logos-slide img{
  height:50px;
  margin: 0 40px;
}