The problem with re-triggering CSS animations

How the problem with triggering CSS3 animations is forcing us to combine CSS with JavaScript – which is not necessarily a bad thing.

Edited: 2015-12-09 13:27

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 just 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. Do also not forget 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.

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.

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 and the like.

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 will be likely to experience a noticeable boost in performance, that is with the exception of animation-heavy pages.