如何添加 keyfram3 从右向左移动

Question

我有 html 格式的卡片项目。

如您所见，有 8 个卡牌项目。我想要实现的是我想添加一个关键帧以将其从右向左移动，当我将鼠标悬停在其中一个卡片项目上时，我希望它停止。因为我想要它像链条一样不断地翻转，所以我不知道该怎么做。我可以只用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>

但我没有添加关键帧，因为我不知道如何制作它。从字面上看，我正在努力实现完全转向，就像当它从窗户出去时，其他东西应该无限地出现。

Answer 1

在你的 css 文件中使用它。

.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
}

完成了。