How can I add keyfram3 to move from right to left - html

Question

I have card items in html.
As you see there are 8 card items. What I am trying to achieve is I want to add a keyframe to move that from right to left and when I hover over one of the card items, I want it to stop. Since I want it continuously like a chain turn over and over, I couldn't figure out how to do it. Can I achieve this only with css?
.card {
list-style: none;
position: relative;
filter: brightness(0.9) saturate(0);
}
.card:before {
content: "";
display: block;
padding-bottom: 150%;
width: 100%;
}
.card-background {
background-size: cover;
background-position: center;
border-radius: 24px;
bottom: 0;
filter: brightness(0.75) saturate(1.2) contrast(0.85);
left: 0;
position: absolute;
right: 0;
top: 0;
transform-origin: center;
trsnsform: scale(1) translateZ(0);
transition: filter 200ms linear, transform 200ms linear;
}
.card:hover {
filter: unset;
}
.card:hover .card-background {
transform: scale(1.05) translateZ(0);
cursor: pointer;
}
<div class="row">
<div class="col-md-2">
<div class="card">
<div class="card-background" style="background-image: url(https://images.unsplash.com/photo-1557177324-56c542165309?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80)">
</div>
</div>
</div>
<div class="col-md-2">
<div class="card">
<div class="card-background" style="background-image: url(https://images.unsplash.com/photo-1557177324-56c542165309?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80)">
</div>
</div>
</div>
<div class="col-md-2">
<div class="card">
<div class="card-background" style="background-image: url(https://images.unsplash.com/photo-1557177324-56c542165309?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80)">
</div>
</div>
</div>
<div class="col-md-2">
<div class="card">
<div class="card-background" style="background-image: url(https://images.unsplash.com/photo-1557187666-4fd70cf76254?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60)">
</div>
</div>
</div>
<div class="col-md-2">
<div class="card">
<div class="card-background" style="background-image: url(https://images.unsplash.com/photo-1556680262-9990363a3e6d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60)">
</div>
</div>
</div>
<div class="col-md-2">
<div class="card">
<div class="card-background" style="background-image: url(https://images.unsplash.com/photo-1557004396-66e4174d7bf6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60)">
</div>
</div>
</div>
<div class="col-md-2">
<div class="card">
<div class="card-background" style="background-image: url(https://images.unsplash.com/photo-1556680262-9990363a3e6d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60)">
</div>
</div>
</div>
<div class="col-md-2">
<div class="card">
<div class="card-background" style="background-image: url(https://images.unsplash.com/photo-1557004396-66e4174d7bf6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60)">
</div>
</div>
</div>
</div>
But I didnt add my keyframe because I dont know how can I make it. Literally, I am trying to achieve full turn, like when it goes out from the window something else should come infinitely.

Answer 1

Use this in your css file.
.card {
list-style: none;
position: relative;
filter: brightness(0.9) saturate(0);
width: 10%;
animation: lefttoright 5s linear 2s infinite alternate; //name duration timing-function delay count direction
}
#keyframes lefttoright {
0%{
left: 0;
}
50%{
left: 50%;
}
100%{
left: 0;
}
}
.card:hover {
filter: unset;
animation-play-state: paused; //stop animation when hover on each item
}
It's done.