The Problem with Re-triggering CSS Animations
CSS animations can not easily be re-triggered, read more about the problem here.
Edited: 2017-01-10 04:25
One of the best ways to add fade effects to HTML elements is to use the animation properties of CSS. The main advantage is that CSS often takes far less code than JavaScript, but another advantage is that CSS animations are hardware accelerated, where's traditional JS techniques will rely on the CPU.
If, however, you are using jquery already, you may as well just stick with the JavaScript way of doing things, since you will have it available anyway. Also keep in mind that JS is better supported in older browsers than CSS animations.
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.
While some users may disable scripting out of privacy concerns, scripting is here to stay, as it is solving problems that can not be solved easily without.
Problems with resetting the animation
If your animation is a kind of crossover transition between multiple elements, such as those often 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. However, when it comes to controlling a series of animations on different elements, pure CSS techniques quickly become 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 are changing dynamically. And it is also more like a hack than a real solution, mainly due to the complexity.
There are ways to solve this using JavaScript, but that kinda defeats the purpose of using CSS in the first place. There may still be performance gains, but this would rarely be one of the first things to consider when you decide, as the general performance of JS based techniques is already fairly good. The benefit of using hardware accelerated CSS animations might therefor be the most noticeable on older mobile devices.
Conclusion
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.
CSS can likely still be useful in complex animations. If we combine the use of JavaScript with CSS for optimization purposes, such as minifying the code needed to create certain effects, and to leverage hardware acceleration. But it is only slower devices that are likely to experience a noticeable boost in performance. Perhaps with the exception of really animation-heavy pages.
If possible, and backwards compatibility is not an issue, combinging CSS animations with JavaScript could be easier than doing the effects strictly in JavaScript.
Tell us what you think: