A problem with using CSS animations for slideshows is that there is no decent way of restarting your animation. The pure CSS solution to this problem comes with its own limitations, and is also unnecessarily complicated.
You also can not simply create one animation, and then apply it as you wish, when you wish, on different elements on the page. If more than one element share the same animation, which is to be triggered at different times, then they will need each their own class with their own animation delays.
The clumsiness of CSS animations can quickly add a lot of unnecessary code, and hence, in some cases JS will still be the preferred way to create complex animation. If you are trying to avoid JS out of fear that visitors might have it disabled, then you might want to take a step back, because that is in fact very rare.
Problems with resetting the animation
If your animation is a kind of crossover transition between multiple elements, such as those used in slideshows, then there could be a problem getting your slideshow to start over after it has finished running the first time. We want to reset the animation sequence to create a looping animation, but the ony way to do that currently, seems to be by removing the slideshow from the page using JS, and then inserting it again.
CSS animations are great for single-element animations, link :hover effects and the like. However, when it comes to controlling a series of animations on different elements, pure CSS techniques quickly becomes very complicated.
There are some workarounds for these problems, but they are unnecessarily complicated, and more like hacks than real native solutions.
Calculating the duration of the slideshow for repetition
One solution is to not use ID's, but rather use classes to identify the elements used in the animation. This has its own limitations, however, as it limits us to only creating certain types of crossover effects. If we were to change the opacity – to create a fade effect between elements – using the single class approach would break the animation, since all elements would be affected by the animation at once.
If we are animating the position of the elements, the single class solution might work. Say each slide takes 15 seconds, and you got 4 slides total, you need to actually manually multiply the number of seconds that each slide lasts, with the total number of slides, and then insert these values as fixed values for the class in your CSS.
The problem with this is that it limits you to just the 4 slides. You can not add another slide, without having to re-calculate everything. Which is very impractical on websites that change dynamically. And it is also more like a hack, than a real solution, due to the complexity.
The complicated nature of CSS animations, might be due to the way CSS is implemented in browsers, or due to CSS not being a scripting language like JS. You can not easily tell your CSS animations to start over after certain events has taken place on the page without using JS.
While CSS animations are not very useful for complicated stuff, it may still be useful for simple :hover effects and the like.