angular 2 animation vs css animation - when to use

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).

Answer 2

The answer is actually in the docs:

https://angular.io/guide/animations

Angular's animation system lets you build animations that run with the same kind of native performance found in pure CSS animations. You can also tightly integrate your animation logic with the rest of your application code, for ease of control.

It also abstracts away the need to keep track of lengths of animations in order to stagger and avoid overloading the browser, or in chaining animations.

Generally, if you have a simple little thing, CSS is probably easier. But if you are consistently doing animation in your app you get a lot of power with little down-side from Angular Animations.