Apply pulse / breath effect to border of card of primeng

I have a list of employees displayed in a card class of primeng.

   <ng-template pTemplate="gridItem">
          <div class="grid grid-nogutter">
            <div *ngFor="let employee of employees" class="col-12 md:col-4">
              <div class="card m-3 surface-border" [ngClass]="{'alert-card': employee.hasAlert}">

If I add this to my scss

.alert-card {
  border: 2px solid rgba(231, 8, 100, 0.55) !important;
}

I see correctly a border (only when I add !important to the end)

What I want is now a pulse effect on that border so it slowly becomes red, red disappears in a loop so I tried this

.alert-card {
  animation: fadeColor 1s infinite;
}

@keyframes fadeColor {
  0%, 100% {
    border-color: transparent;
  }
  50% {
    border-color: rgba(231, 8, 100, 0.55) !important;
  }
}

Alternativly I've tried this

.alert-card {
  border-width: 3px;
  border-style: solid;
  border-color: transparent;
  animation: fadeColor 1s infinite;
}

@keyframes fadeColor {
  0%, 100% {
    border-color: transparent;
  }
  50% {
    border-color: rgba(231, 8, 100, 0.55);
  }
}

with no effect either. In this case I can see at least a 3px big border which is grey (default color) but no effect is applied.

But it has no effect unfortunately. Thanks in advance for your contribution.

You can remove the !important and just directly apply the styles. Also delete surface-border from the class.

This example from w3 was helpful in getting the CSS just right.

We can specify the default border color (make sure it's not set with important), then the animation only needs 50% to be set and it will pulsate.

div.alert-card {
  border-width: 2px !important;
  border-style: solid !important;
  border-color: transparent;
  animation: fadeColor 2s infinite;
  border-radius: 6px;
}

@keyframes fadeColor {
  50% {
    border-color: rgb(192, 25, 148);
  }
}

Stackblitz Demo