Примените эффект пульса/дыхания к границе карты премьеры

У меня есть список сотрудников, отображаемый в классе карточек 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}">

Если я добавлю это в свой scss

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

Я правильно вижу границу (только когда добавляю !important в конец)

Теперь мне нужен импульсный эффект на этой границе, чтобы она медленно становилась красной, а красный циклически исчезал, поэтому я попробовал это

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

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

Альтернативно я пробовал это

.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);
  }
}

тоже без эффекта. В этом случае я вижу серую рамку шириной не менее 3 пикселей (цвет по умолчанию), но эффект не применяется.

Но, к сожалению, это не имеет никакого эффекта. Заранее спасибо за ваш вклад.