如何从相同位置开始关键帧？

Question

我正在尝试模仿任何纸牌游戏，在该游戏中，您从起点开始抓牌，然后将其分发给玩家/经销商

但是，问题是，当我继续绘制卡片时，它们是从最后一张卡片的上一个结束位置开始绘制的，即沿着页面越来越远

如何防止这种情况并始终获得相同的起始位置？

代码：

@-webkit-keyframes drawCard {
  from {left: -100px}
  to {left: 50px}
}

.card{
  width: 80px;
  height: 100px;
  border: 1px solid black;
  -webkit-animation: drawCard 3s;
  position: relative;
  background-color: white;
  margin: 10px;
}

      {this.state.playersHand.map(card => (
        <div className="card">{card.rank} of {card.suit}</div>
      ))}

让我知道是否需要更多代码/解释