Анимация ключевого кадра на ion-элементе плавно не переходит

Question

Я добавляю анимацию к моему элементу ion, когда он добавляется в список. Это работает, но анимация перехода не является плавной, как это должно быть при использовании chrome на P C или Android устройстве.

Если я использую анимацию на обычном элементе div (используя background-color), он работает как положено, цвет постепенно исчезает с синего на белый. Однако при использовании --background, который требуется для ion-item, он остается синим до конца, а затем переходит на белый.

Это должно выглядеть как пример здесь: https://css-tricks.com/using-multi-step-animations-transitions/

Любые предложения о том, как сделать этот переход плавным?

Я использую Ioni c 5

@keyframes highlight-add {
  0% {
    --background: #a8d8ea;
    opacity: 0.3;
  }
  30% {
    --background: #a8d8ea;
    opacity: 1;
  }
  100% {
    --background: #fff;
  }
}

.student-item-animate {
  -webkit-animation: highlight-add 5s; 
  animation: highlight-add 5s;
}

 <ion-item *ngFor="let student of studentsBooked" [ngClass]="{'student-item-animate': student.isNew}">

Также на iOS изменение цвета полностью игнорируется. Просто непрозрачность меняется.

РЕДАКТИРОВАТЬ: git репо здесь: https://github.com/madmacc/Ionic5HighlightAnimation