仅使用CSS的滑块图像：一次动画+过渡

Question

我正在尝试使用动画和过渡立即创建Slider图像。动画属性几乎每6.5秒将div（.slider__images）左移一次，当用户单击小的圆形按钮以特定值将滑块向左平移时，transition属性将起作用。但是问题是我不能同时使用它们，因为它们根本不起作用，我需要注释其中之一以使动画或按钮正常工作。您可以看一下Codepen上的代码：https://codepen.io/Youssri/pen/GbajOQ?editors=1100 注意：动画正在评论中，请尝试取消评论...它将不起作用！

这是关键帧动画：

@keyframes slider {
  0% { 
    left: 0; 
  }
  20% { 
    left: 0; 
  }
  40% { 
    left:  -100vw; 
  }
  60%{
    left: -100vw;
  }
  80%{
    left: -200vw;
  }
  100% {
    left: -200vw;
  }
}

这是按钮css

#first-image:target ~ .slider__images {
  left: 0;
}
#second-image:target ~ .slider__images {
  left: -100vw;
}
#third-image:target ~ .slider__images {
  left: -200vw;
}

要滑动的div

.slider__images {
  width: 300vw;
  height: 90vh;
  margin: 0;
  font-size: 0;
  position: relative;
  transition: left 2s;
  /*animation: slider 20s infinite alternate;*/
}