Slider image using only css: animation + transition at once - css

Question

I'm working on creating a Slider image, using animation and transition at once. the animation property translates a div(.slider__images) to the left almost every 6.5 sec and the transition property works when the user clicks the small rounded button to translate the Slider to the left with a specific value. But the problem is I can't use both of them it's simply does not work, I need to comment one of them to make the animation or the buttons work. You can have a look at the code on codepen: https://codepen.io/Youssri/pen/GbajOQ?editors=1100
NOTE: the animation is on comment, try to uncomment it... it won't work!
This is the keyframe animation:
#keyframes slider {
0% {
left: 0;
}
20% {
left: 0;
}
40% {
left: -100vw;
}
60%{
left: -100vw;
}
80%{
left: -200vw;
}
100% {
left: -200vw;
}
}
This the buttons css
#first-image:target ~ .slider__images {
left: 0;
}
#second-image:target ~ .slider__images {
left: -100vw;
}
#third-image:target ~ .slider__images {
left: -200vw;
}
the div to slide
.slider__images {
width: 300vw;
height: 90vh;
margin: 0;
font-size: 0;
position: relative;
transition: left 2s;
/*animation: slider 20s infinite alternate;*/
}