Is there a better way to create my slider using HTML5 and CSS3 exclusively?

The odd timing issue is caused by the keyframe % and your animation duration.

You start out with 20% of the animation duration for the first slide. (two keyframes set to 0 and 20% with no left movement)
The next slide moves in over 5% of the animation duration, then sits for 20%.
The next slide comes in over 5%, sits for 20%.
The next comes in over 5%, sits for 20%.
The final slide comes in over 5%, but has no "sit" duration so the whole show snaps to the beginning again as soon as it comes into view.

You could do one of a couple things here...

You could even out the keyframe durations, and add a "sit" keyframe to the end, if you want the animation to spend the same amount of time on each. Increase the duration of your animation property, then change the % values in the keyframes so each slide moves in over the same % and then sits for the same %.

It would be easier, with your current code, to duplicate the first image at the end of the slideshow instead. It would essentially trick the user into thinking the slideshow is a carousel, and ends where it begins, when in reality it snaps back to the beginning (but transitioned smoothly into a duplicate image before snapping to that same image).

Basically, get rid of the green image at the end, and replace it with a duplicate of the slideshow's first image, without touching your keyframes.

You can certainly use just html and css for an image or content slider, but if you wish it to work in IE9 and below it will not work, any browser after IE9 should not have any problems, including smartphone/tablet mobile device browsers.

Can you tell us which browsers/devices you intend to support, and more importantly how advanced you yourself think your knowledge of css is, as this is not a beginner coding project.

Have a look at the css keyframes version at the link below. Very similar to the one you are using but the slides reverse once the end slide of the animation is reached, making it a smoother workflow, rather than jumping to the first slide:::

Simple CSS Content Slider! [VOICE TUTORIAL] - YouTube

When you say slider, do you mean a range slider or an image slider?

Range - <input type="range"> - HTML | MDN

Image - Bootstrap Carousel   |   WOW : jQuery Slider w/o Coding : jQuery Slideshow

Range sliders are easy to do with HTML5.

Image Sliders are a bit more tricky.  I'm not saying you can't do it manually but I'm of the opinion that jQuery library is already  loaded in most people's browser cache because practically every website in the world uses it for one thing or another.   If it's already there, you may as well use it.

Nancy