I am creating a horizontal logo slider with multiple tracks.My goal is:
Even-numbered tracks should animate logos to the right.
Odd-numbered tracks should animate logos to the left.
Whenever I add new child elements to .logo-slider, the animation should automatically apply (no manual CSS changes).
The animation should run smoothly, without any jumps, snapping, or lagging when repeating.
Important point: I want this animation to be executed only with CSS, not JavaScript.
What I have tried
I used @keyframes move-left and @keyframes move-right and applied them with nth-child(even) and nth-child(odd).But the animation feels inconsistent – sometimes it jumps when restarting or doesn’t apply to new children properly.
I’ve done a lot of searches on the internet.
I’ve watched many videos on this topic.
I also checked the code of websites that had created horizontal animations.
I’ve somewhat figured out what needs to be done for horizontal animation,
but I still have trouble making the animation run continuosly without any jumps.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.logo-slider {
width: 100%;
display: flex;
flex-direction: column;
gap: 34px;
overflow: hidden;
}
.logo-slider__track {
width: 100%;
height: 150px;
border-radius: 20px;
display: flex;
background-color: hsl(215, 50%, 20%);
box-shadow:
inset 0 15px 15px -12px hsl(215, 50%, 5%),
inset 0 -15px 15px -12px hsl(215, 50%, 5%);
transition: all 0.4s linear;
overflow: hidden;
position: relative;
}
.logo-slider__track:hover {
box-shadow:
inset 0 15px 10px -12px hsl(198, 100%, 55%),
inset 0 -15px 10px -12px hsl(198, 100%, 55%);
}
.container-slider__list {
display: flex;
animation: scroll 30s linear infinite;
}
.container-slider__list:hover {
animation-play-state: paused;
}
.logo-slider__list {
display: flex;
align-items: center;
}
.logo-slider__list * {
width: auto;
height: 80px;
margin: 0 50px;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.logo-slider:nth-child(even) .logo-slider__track .container-slider__list {
animation-direction: reverse;
}
</style>
</head>
<body>
<div class="logo-slider">
<div class="logo-slider__track">
<div class="container-slider__list">
<div class="logo-slider__list">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=0">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=1">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=2">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=3">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=4">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=5">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=6">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=7">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=8">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=9">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=10">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=11">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=12">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=13">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=14">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=15">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=16">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=17">
</div>
<div class="logo-slider__list">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=0">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=1">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=2">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=3">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=4">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=5">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=6">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=7">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=8">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=9">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=10">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=11">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=12">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=13">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=14">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=15">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=16">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=17">
</div>
</div>
</div>
<div class="logo-slider__track">
<div class="container-slider__list">
<div class="logo-slider__list">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=18">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=19">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=20">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=21">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=22">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=23">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=24">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=25">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=26">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=27">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=28">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=29">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=30">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=31">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=32">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=33">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=34">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=35">
</div>
<div class="logo-slider__list">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=18">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=19">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=20">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=21">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=22">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=23">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=24">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=25">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=26">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=27">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=28">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=29">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=30">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=31">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=32">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=33">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=34">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=35">
</div>
</div>
</div>
<div class="logo-slider__track">
<div class="container-slider__list">
<div class="logo-slider__list">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=36">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=37">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=38">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=39">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=40">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=41">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=42">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=43">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=44">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=45">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=46">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=47">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=48">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=49">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=50">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=51">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=52">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=53">
</div>
<div class="logo-slider__list">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=36">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=37">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=38">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=39">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=40">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=41">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=42">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=43">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=44">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=45">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=46">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=47">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=48">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=49">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=50">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=51">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=52">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=53">
</div>
</div>
</div>
</div>
</body>
</html>Despite the similarity of the code to the previous answer, I didn’t achieve the result I wanted. After making some changes to the code, I finally reached the outcome I was looking for.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.logo-slider {
width: 100%;
display: flex;
flex-direction: column;
gap: 34px;
overflow: hidden;
}
.conatainer-slider {
border-radius: 20px;
background-color: hsl(215, 50%, 20%);
box-shadow:
inset 0 15px 15px -12px hsl(215, 50%, 5%),
inset 0 -15px 15px -12px hsl(215, 50%, 5%);
overflow: hidden;
position: relative;
}
.conatainer-slider:hover {
box-shadow:
inset 0 15px 10px -12px hsl(198, 100%, 55%),
inset 0 -15px 10px -12px hsl(198, 100%, 55%);
}
.shadow-right,
.shadow-left {
width: 170px;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
}
.shadow-right {
background: linear-gradient(270deg,
rgba(15, 23, 42, 1) 0%,
rgba(15, 23, 42, 0.8) 20%,
rgba(15, 23, 42, 0.6) 40%,
rgba(15, 23, 42, 0.4) 60%,
rgba(15, 23, 42, 0.2) 80%,
rgba(15, 23, 42, 0) 100%);
right: 0;
}
.shadow-left {
background: linear-gradient(90deg,
rgba(15, 23, 42, 1) 0%,
rgba(15, 23, 42, 0.8) 20%,
rgba(15, 23, 42, 0.6) 40%,
rgba(15, 23, 42, 0.4) 60%,
rgba(15, 23, 42, 0.2) 80%,
rgba(15, 23, 42, 0) 100%);
left: 0;
}
.logo-slider__track {
width: max-content;
height: 150px;
display: flex;
transition: all 0.4s linear;
overflow: hidden;
animation: scroll 21s linear infinite;
}
.logo-slider__list {
display: flex;
align-items: center;
}
.logo-slider:hover .logo-slider__track:hover {
animation-play-state: paused;
}
.logo-slider__list * {
width: auto;
height: 80px;
margin: 0 50px;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.logo-slider .conatainer-slider:nth-of-type(even) .logo-slider__track {
animation-direction: reverse;
}
</style>
</head>
<body>
<div class="logo-slider">
<div class="conatainer-slider">
<div class="logo-slider__track">
<div class="logo-slider__list">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=0">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=1">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=2">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=3">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=4">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=5">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=6">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=7">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=8">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=9">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=10">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=11">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=12">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=13">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=14">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=15">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=16">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=17">
</div>
<div class="logo-slider__list">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=0">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=1">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=2">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=3">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=4">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=5">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=6">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=7">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=8">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=9">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=10">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=11">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=12">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=13">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=14">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=15">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=16">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=17">
</div>
</div>
<div class="shadow-right"></div>
<div class="shadow-left"></div>
</div>
<div class="conatainer-slider">
<div class="logo-slider__track">
<div class="logo-slider__list">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=18">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=19">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=20">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=21">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=22">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=23">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=24">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=25">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=26">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=27">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=28">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=29">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=30">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=31">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=32">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=33">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=34">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=35">
</div>
<div class="logo-slider__list">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=18">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=19">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=20">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=21">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=22">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=23">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=24">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=25">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=26">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=27">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=28">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=29">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=30">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=31">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=32">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=33">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=34">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=35">
</div>
</div>
<div class="shadow-right"></div>
<div class="shadow-left"></div>
</div>
<div class="conatainer-slider">
<div class="logo-slider__track">
<div class="logo-slider__list">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=36">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=37">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=38">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=39">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=40">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=41">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=42">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=43">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=44">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=45">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=46">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=47">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=48">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=49">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=50">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=51">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=52">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=53">
</div>
<div class="logo-slider__list">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=36">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=37">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=38">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=39">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=40">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=41">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=42">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=43">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=44">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=45">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=46">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=47">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=48">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=49">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=50">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=51">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=52">
<img class="logo-slider__logo" src="https://i.pravatar.cc/150?img=53">
</div>
</div>
<div class="shadow-right"></div>
<div class="shadow-left"></div>
</div>
</div>
</body>
</html>