Infinite CSS Marquee/Ticker Logo
An easy way to utilize CSS for Logo marquees and other sections in your Webflow site. An easier way to create an infinite looping marquee on your Webflow site than creating them manually with Webflow interactions.
An easy way to utilize CSS for Logo marquees and other sections in your Webflow site. An easier way to create an infinite looping marquee on your Webflow site than creating them manually with Webflow interactions.
How to add it
- This utilizes the wrapper div .loop-track which is set to flex horizontal with two identical lists of logos in it that are also flex horizontal
- The CSS code below sets the animation that moves each of the two collection lists 100% to the left and then the animation is set for 60s using linear easing.
- Add the CSS code as an embed or via your page code settings in the header section.
The code
CSS
<style>
/*----- Loop hero and pause on hover/focus -----*/
.loop-collection {
-webkit-animation: logoloop 60s linear infinite;
-moz-animation: logoloop 60s linear infinite;
-o-animation: logoloop 60s linear infinite;
}
.loop-track:hover .loop-collection,
.loop-track:focus-within .loop-collection {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}
@media (prefers-reduced-motion) {
.home-partner_loop-wrapper {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}
}
@-webkit-keyframes logoloop {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
@-moz-keyframes logoloop {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
@-o-keyframes logoloop {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
@keyframes logoloop {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
</style>
