title: Infinite css animation applied to svg in my Angular Component seems to cause memory leak
body: <p>I do have an Angular Component in which I included an svg. The groups are dynamically built with an ngFor and contain another app (e.g. <em>app-item-l</em> and <em>app-item-s</em> in which I pass width and height). This setup works very smoothly, but as soon as I add some <strong>animated</strong> css styles to the single items the animation seems to cause a memory leak and I can't find out why or how to solve that. If I run the app with simple css (not animated) there is no problem at all.</p>
  <p>It also might be important to say that the App is running continously. So when I keep it going over night the RAM is at 98% next morning and even if I navigate to a different route the RAM isn't cleaned up by the GC.</p>
  <p>Here is some simplified code of my App. Any hint on how to get this under control is highly appreciated</p>
  <p><strong>app.html</strong></p>
  <pre><code>&lt;svg [attr.viewBox]=&quot;viewBoxValue&quot; preserveAspectRatio=&quot;xMinYMin meet&quot; class=&quot;animated&quot;&gt;
    &lt;g *ngFor=&quot;let itemL of itemsLarge&quot; app-item-l [width]=&quot;largeWidth&quot; [height]=&quot;largeHeight&quot; [attr.transform]=&quot;itemL.transform&quot; [class]=&quot;itemL.display&quot; /&gt;
    &lt;g *ngFor=&quot;let itemS of itemsSmall&quot; app-item-s [width]=&quot;smallWidth&quot; [height]=&quot;smallHeight&quot; [attr.transform]=&quot;itemS.transform&quot; [class]=&quot;itemS.display&quot; /&gt;
  &lt;/svg&gt;
  </code></pre>
  <p><strong>Excerpt of app.ts</strong></p>
  <pre><code>export class AppComponent implements OnInit {
  ...
  x = 0;
  y = 0;
  width = 1000;
  height = 600;
  viewBoxValue = `${this.x} ${this.y} ${this.width} ${this.height}`;
  
  largeWidth = 150;
  largeHeight = 100;
  
  smallWidth = 80;
  smallHeight = 50;
  
  itemsLarge = [
     {name: &quot;Item Large One&quot;, display: &quot;nok&quot;, transform: &quot;translate(10, 10)&quot;},
     {name: &quot;Item Large Two&quot;, display: &quot;ok&quot;, transform: &quot;translate(10, 200)&quot;}
  ];
  
  let itemsSmall = [
     {name: &quot;Item Small One&quot;, display: &quot;nok&quot;, transform: &quot;translate(100, 10)&quot;},
     {name: &quot;Item Small Two&quot;, display: &quot;ok&quot;, transform: &quot;translate(100, 200)&quot;}
  ]
  
  ngOnInit(): void {}
   *Some other logic - not important for this question*
  }
  </code></pre>
  <p><strong>Excerpt of applied css.ts which works</strong></p>
  <pre><code>.ok {
      fill: #9ca810;
  }
  
  .nok {
      fill: #ff0000;
  }
  </code></pre>
  <p><strong>But this creates a memory leak - WHY?</strong></p>
  <pre><code>.ok {
      fill: #9ca810;
  }
  
  .nok {
      fill: #ff0000;
      animation: alert 1s linear infinite;
  }
  
  @keyframes alert {  
      0%   {fill: #bf0313; }
      50%  {fill: #ff4a0d; }
      100%  {fill: #bf0313; }
  }
  </code></pre>