title: What is the purpose of Angular animations?
body: <p>I've been wondering for some time now <strong>why should I use Angular animations over CSS animations</strong>. I see few areas one might consider before using them:</p>
  <hr />
  <h2>Performance</h2>
  <p>In the first step I found this <a href="https://stackoverflow.com/questions/40949262/angular-2-animation-vs-css-animation-when-to-use-what">question</a> which deals only with performace side of things. The accepted answer is not satisfying for me because it states that <em>one should use CSS animations wherever possible so that optimizations like running the animations in separate thread can apply</em>. This doesn't seem to be true, because <a href="https://angular.io/guide/animations#overview" rel="noreferrer">Angular documentation</a> states</p>
  <blockquote>
  <p>Angular animations are <strong>built on top of the standard Web Animations API</strong> and run natively on browsers that support it.</p>
  </blockquote>
  <p>(emphasis mine)</p>
  <p>And when we look at <a href="https://drafts.csswg.org/web-animations/#introduction" rel="noreferrer">Web Animations API Draft</a> we see that the same optimizations can apply to Web Animations as to CSS specified in sheets.</p>
  <blockquote>
  <p>While it is possible to use ECMAScript to perform animation using requestAnimationFrame [HTML], such animations behave differently to declarative animation in terms of how they are represented in the CSS cascade and the performance optimizations that are possible such as performing the animation on a separate thread. <strong>Using the Web Animations</strong> programming interface, it is <strong>possible to create animations</strong> from script <strong>that have the same behavior and performance characteristics as declarative animations</strong>.</p>
  </blockquote>
  <p>(emphasis mine again)</p>
  <p>Apart from some browsers like IE don't support Web Animations, <strong>is there any reason to use either CSS declarations over Angular animations or vice versa?</strong> I see them as exchangeable performace-wise.</p>
  <hr />
  <h2>More control over the animations</h2>
  <p>This might look as an argument for Angular animations, because you can <a href="https://stackoverflow.com/questions/48713488/pause-angular-animations">pause animation</a> or use JS variables with it etc., but the same is true while using eg. CSS <code>animation-play-state: pause</code> or using <strong>CSS variables</strong> specified in JS, see <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables#Values_in_JavaScript" rel="noreferrer">documentation</a>.</p>
  <p>Now I can see it might be inconvenient to set the CSS variables in JS code, but the same is true while using Angular animations. These are typically declared in <code>@Component</code> <code>animations</code> field and don't have, except for via the animation state data bound property, access to instance fields (if you don't create your animation via <code>AnimationBuilder</code> of course, which btw is also not very convenient or beautiful either).</p>
  <p>Other point is, with Web Animations API it is possible to <a href="https://drafts.csswg.org/web-animations/#use-cases" rel="noreferrer">inspect, debug or test</a> the animations, but I don't see how this is possible with Angular animations. If it is, could you please show me how? If it isn't, I really <strong>don't see any advantage of using Angular animations over CSS ones for the sake of control either</strong>.</p>
  <hr />
  <h2>Cleaner code</h2>
  <p>I've read for example <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API#Meet_the_Web_Animations_API" rel="noreferrer">here</a> a paragraph stating that separating animations from &quot;normal&quot; styles is actually separation of behaviour and presentation. <strong>Is really declaring animations in styles sheets mixing those responsibilities?</strong> I saw that always the other way, especially looking at CSS rules in the <code>@Component</code> animations gave me a feeling of having CSS declarations on one too many places.</p>
  <hr />
  <h3>So how is it with Angular animations?</h3>
  <ul>
  <li>Is it just a convenience utility to extract animations away from the rest of the styles, or does it bring anything worthy feature-wise?</li>
  <li>Does a usage of Angular animations pay off only in special cases or is it a convention a team chooses to go all the way with it?</li>
  </ul>
  <p>I would love to here about tangible advantages of using Angular animations. Thanks guys upfront!</p>