Css 激活项上的关键帧动画未平滑过渡

我正在向我的离子项目添加动画，因为它已添加到列表中。 它可以工作，但动画过渡并不像在PC或Android设备上使用chrome时那样平滑

如果我在普通div上使用动画（使用背景色），它会按照预期工作，颜色会从蓝色慢慢变为白色。 但是，当使用--background时，它会一直保持蓝色直到结束，然后跳到白色

它应该像下面的例子：

有没有关于如何顺利过渡的建议

我用的是离子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}">

@关键帧高亮显示添加{
0% {
--背景：#a8d8ea；
不透明度：0.3；
}
30% {
--背景：#a8d8ea；
不透明度：1；
}
100% {
--背景：#fff；
}
}
.学生项目动画{
-webkit动画：突出显示添加5s；
动画：突出显示添加5s；
}

此外，在iOS上，颜色变化完全被忽略。只是不透明度改变了

编辑： 吉特回购协议：

---

这解释了ios/safari的问题：css变量似乎不完全可设置动画