Infinite Logo Carousel in Webflow Using CSS only

Here is a quick and easy way to make popular infinite logo carousel:

Structure you should make:

Code you should put inside styles somewhere (either head code, global, or HTML embed). Same is appliable for bare HTML and CSS:

.trusted-by-logo-w {
  animation: scroll infinite 40s linear;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - 6.5rem));
  }
}

@keyframes scrollMobile {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - 3.5rem));
  }
}

@media (max-width:991px) {
	.trusted-by-logo-w {
  		animation: scrollMobile infinite 40s linear;
	}

}

‍
Important notes to watch out on:

• Wrappers (.trusted-by-logo-w) should be display flex and you should put desired gap between logos.
• Gap here is 6.5rem so you should adjust keyframes to match your gap.
• Logos (.trusted-by-logo) should have flex-sizing set to 'Don't shrink or grow'. (as shown in image below)
• You can set animation duration (40s) to anything.
• You can use scrollMobile to adjust animation if there is any change in gap between mobile and desktop. ( gap must equal keyframe translateX value )