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. app-item-l and app-item-s in which I pass width and height). This setup works very smoothly, but as soon as I add some animated 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.

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.

Here is some simplified code of my App. Any hint on how to get this under control is highly appreciated

app.html

<svg [attr.viewBox]="viewBoxValue" preserveAspectRatio="xMinYMin meet" class="animated">
  <g *ngFor="let itemL of itemsLarge" app-item-l [width]="largeWidth" [height]="largeHeight" [attr.transform]="itemL.transform" [class]="itemL.display" />
  <g *ngFor="let itemS of itemsSmall" app-item-s [width]="smallWidth" [height]="smallHeight" [attr.transform]="itemS.transform" [class]="itemS.display" />
</svg>

Excerpt of app.ts

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: "Item Large One", display: "nok", transform: "translate(10, 10)"},
   {name: "Item Large Two", display: "ok", transform: "translate(10, 200)"}
];

let itemsSmall = [
   {name: "Item Small One", display: "nok", transform: "translate(100, 10)"},
   {name: "Item Small Two", display: "ok", transform: "translate(100, 200)"}
]

ngOnInit(): void {}
 *Some other logic - not important for this question*
}

Excerpt of applied css.ts which works

.ok {
    fill: #9ca810;
}

.nok {
    fill: #ff0000;
}

But this creates a memory leak - WHY?

.ok {
    fill: #9ca810;
}

.nok {
    fill: #ff0000;
    animation: alert 1s linear infinite;
}

@keyframes alert {  
    0%   {fill: #bf0313; }
    50%  {fill: #ff4a0d; }
    100%  {fill: #bf0313; }
}