title: How to create theme based CSS animations in Angular Material
body: <p>I'm using angular material and have 3 different themes. I'm attempting to make a "pulse" animation and I'm using colors of the theme's primary to pulse the </p>
  
  <p>Now from what I read it appears that angular doesn't scope keyframes to components and instead they are declared globally. So it appears that wherever my last declared theme is, it's overriding the previous and in the end the color of the kyframes is the same for all themes.</p>
  
  <p>I created custom component and I added the keyframes and animation as shown below. However, the color doesn't change when I change each theme.</p>
  
  <p>What is the proper way to do this and still use the theme's primary color?</p>
  
  <pre><code>@import '~@angular/material/theming';
  
  @mixin atrh-rating-component-theme($theme) {
    $primary: map-get($theme, primary);
  
    .bar {
      background-color: mat-color($primary, 200);
  
      &amp;--selected {
        background-color: mat-color($primary);
      }
  
      &amp;--highlighted {
        background-color: mat-color($primary, 800);
        animation: pulse 1.3s;
        animation-iteration-count: 4;
      }
    }
  
    @keyframes pulse {
      0% {
          background-color: mat-color($primary, 900)
      }
  
      50% {
          background-color: mat-color($primary, 700)
      }
  
      100% {
          background-color: mat-color($primary, 900)
      }
    }
  }
  </code></pre>