添加-webkit前缀后CSS动画仍无法在Chrome 86.0.4240.75中生效——mat-icon旋转动画问题

你碰到的核心问题是Chrome 86.0.4240.75版本还不支持CSS独立rotate属性——这个属性属于较新的CSS Transform Level 2规范，Chrome要到90版本才开始支持，而Firefox对它的适配更早，所以你的代码在火狐里能正常运行，但在旧版Chrome里完全没反应。

解决起来很简单，把@keyframes里的rotate替换成传统的transform: rotate()写法，同时保留-webkit前缀适配WebKit内核即可：

@keyframes rotateIcon {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@-webkit-keyframes rotateIcon {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
.animatedIcon {
  /* 建议加上linear缓动函数，让旋转更平滑均匀 */
  animation: rotateIcon 2s infinite linear;
  -webkit-animation: rotateIcon 2s infinite linear;
}

你的HTML部分不需要做任何改动，保持原结构就行：

<mat-icon class="status-icon animatedIcon"> {{getStatusIcon('IN_PROGRESS')}} </mat-icon>

调整后，Chrome 86和Firefox都能正常渲染流畅的旋转动画了。

内容的提问来源于stack exchange，提问作者infodev