Great explanations guys, thank you! What about the filters? On my opinion it's the blur effect i added on the background and the clouds which cause the slow-down. And as the filters become quite popular, i wonder if our browsers and machines are ready.

html5rocks.com/en/tutorials/speed/high-performanc…

I had write an article about this, check this out! blog.christianvarisco.com/animations-web-css3-lik…

This is a great question! Most people think that CSS animations are faster and they can get away with using anything they want which is not the case.

The answer to your question is quite simple, The effects that require the browser to take fewer steps behind the scene to change the visual look of the element are more efficient.

As @Kleo mentioned, browsers are most efficient in animating opacity and transforms like scale, rotation and translate and it is great cause you can pull off most of the animations using a combinations of these.

An intelligent use of the properties gets you the best results, take this case for en example: if you are modifying the top to move an element on hover, it would be quite heavy as it changes the Layout, Paint and Composite of the element. instead, it can be replaced by transform: translate( ) property which just affects Composite and gets you the same result.

Checking csstriggers.com is a great way of knowing how resource heavy the property is

Although CSS animations are hardware accelerated in all major browsers they can still lack performance in some situations.

There are four animations that browsers can handle really well and cheap - scale, position, rotation and opacity. All other animations that change the geometry of the page (animations that cause painting) are considered expensive. Let's take width for example. Animating an element's width will change its geometry and may cause other elements to move or change too. Those process is called layout. Whenever a layout is triggered, the page is painted (filling out the pixels for each element). The paining is really expensive process!

As a rule of thumb, you should try to avoid animations that trigger layout and paint whenever you can and stick to animating transforms and opacity. For a list of CSS properties that trigger layout or paint when changed you should check this list or CSS Triggers.

Hmm. If you are looking at this via the embed, there is a slight stutter as the assets are loading which is to be expected. However, when I look at this directly on Codepen, I don't get the stuttering in the animation. I checked on both Chrome and FF.

Aside from that, anytime you want implement animation sequences you should be sure to optimize not only the elements you are animating but they rest of the page as well. Extra calls to the server and large images can slow things down for example so be cognizant of your assets.

Try and keep effects simple; the more complicated they get, the more resources they tend to use. Keep that in mind and you should be fine.

The worst effects in terms of performance seem to be blur and 3D but sometimes opacity has been known to degrade performance.