title: Is it possible to disable mat-tab animations with pure css
body: <p>I want to disable the Angular Material mat-tab animation (the animation that occurs as the content slides into place). I know it is possible to use the [@.disabled] attribute but I wonder if it is possible to achieve the same effect with pure css.</p>
  
  <p>EDIT:</p>
  
  <p>Our UX team wants to remove the slide animation from the material tabs since they think they are not appropriate for whatever reason. We have multiple projects that may use multiple times the tabs component, so we wanted a way to remove this animation for the current tabs and the ones to come. Ideally, we do not want to tell people to add (and start adding) any attributes to their HTMLs (they may forget doing so). Also, these projects have as a dependency a project that provides the main css styles.
  The idea was to remove these animations in the main css stylesheet that is shared among all the projects. We tried adding the following, but it did not work:</p>
  
  <pre><code>.mat-tab-body-content, .mat-tab-body, .mat-tab-body-wrapper { 
    transition: none !important;
    transform: none !important; 
    animation-duration: 0ms !important; 
  }
  </code></pre>