css关键帧动画开始位置变化

Question

我有一副纸牌，卡片有这个规则：

@-webkit-keyframes playersCardMove {
  from {left: -180px; bottom: 157px;}
}

此动画显示卡片从牌组移动到球员手牌。然而，问题在于，一旦绘制了第二张牌，它就会从不同的起始位置绘制出来，因为它相对于它将被放置的位置。

如何确保起始位置始终相同，同时将所有卡水平放置在彼此之间？

代码：

.card{
  width: 90px;
  height: 120px;
  border: 1px solid black;
  margin-right: 5px;
  position: relative;
  animation: cardMove 2s;
  animation-fill-mode: forwards;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.playersCard{
  animation: playersCardMove 2s;
  animation-fill-mode: forwards;
}


  {playersHand.map((card) => {
        return <div className="playersCard card">
          <div>{card.rank.rank}</div>
          <div className="imageContainer">
            <img className="cardImage" src={card.image} />
          </div>
          <div>{card.suit}</div>
        </div>
      })}