具有绝对定位的孩子的旋转木马无法正常工作

Question

我正在使用HTML / CSS构建轮播，但遇到了无法解决的问题。

我已将儿童（.card）完全放置在轮播容器中，并希望他们在单击下面的链接时从一侧滑到另一侧。从card4向后退至card1，但从card1向前转至card4时，此方法工作正常。然后它仅跳到card4，似乎将活动卡推离屏幕。

奇怪的是，当我将非活动卡片的位置修改为

left:95%;

代替

left:100%;

（请参阅CSS片段的最底部），它可以按预期工作。

在Chrome，Firefox和Codepen上进行了测试 View on CodePen

非常感谢您的帮助。

这是我的代码：

*{
  box-sizing: border-box;
}

.carousel-links{
  text-align:center;
  position:fixed;
  bottom: 5%;
  left:0;
  right:0;
  z-index:100;
}
.carousel-links a{
  display: inline-block;
  border-radius: 5px;
  border: 1px solid black;
  padding: 1em;
  background:white;
}


.carousel{
  position: relative;
  width:100%;
  height:80vh;
  background:yellow;
  border:5px solid black;
  display:block;
  overflow-x: hidden;
}
.card{
  position: absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  border: 1px dashed black;
  font-size:100px;
  transition: all 2s;
  z-index:1;
}
.carousel > .card:target{
  left:0%;
  //background:rgba(255,0,0,1);
  z-index:2;
}
.carousel > .card:target~*{
  left:100%; 
  /* left:95%;  /*with this line it works */
  z-index:0;
}

<div class="carousel-links">
  <a href="#card1">1</a>
  <a href="#card2">2</a>
  <a href="#card3">3</a>
  <a href="#card4">4</a>
</div>

<div class="carousel">
  <div class="card" id="card1">1</div>
  <div class="card" id="card2">2</div>
  <div class="card" id="card3">3</div>
  <div class="card" id="card4">4</div>
</div>