performance - angular 2 animation vs css animation - when to use what?

Question

I'm currently trying out angular2's animation and I was wondering what specific advantage they bring over standard css animations/transitions.

e.g. a typical material designed card and hover effects with the box shadows. Most css frameworks use :hover and css-transitions. Is there a particular advantage in using angular 2 animations?

I read somewhere that some css animation properties don't invoke the GPU as much, hence there's somethings delays and lags. What about angular2 animations?

Answer 1

The question is actually more javascript animation vs css animation (because angular2's animations are based on javascript-animation).

The answer is that when you can - use CSS animation.

Modern browsers uses different thread for CSS animation, so the javascript-thread is not affected by the CSS animations.

You can use the HTML5 Animation Speed Test to check the preformance of different frameworks (javscript-based) VS CSS animation in your browser.

In general:

Browsers are able to optimize rendering flows. In summary, we should always try to create our animations using CSS transitions/animations where possible. If your animations are really complex, you can may have to rely on JavaScript-based animations instead.

If you want to know specifically regarding the Angular2 animations - just inspect the element in your browser and check if the animation there is a CSS(transition/animationFrame based or javascript (you will be able to see values in the style attribute change during the animation).