CSS 即使添加 -webkit 前缀，动画也无法在 chrome 上运行

Question

我正在尝试旋转 mat-icon

在 css 我正在使用 webkit 前缀。有关信息，此代码适用于 FF。

@keyframes rotateIcon {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: 360deg;
  }
}
@-webkit-keyframes rotateIcon {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: 360deg;
  }
}

.animatedIcon {
  animation: rotateIcon 2s infinite;
  -webkit-animation: rotateIcon 2s infinite;

}

在HTML

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

我收到了不旋转的静态图标。

这是一个snippet

我正在开发这个版本 chrome :86.0.4240.75

Answer 1

试试这个 CSS:

@keyframes rotateIcon {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotateIcon {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.animatedIcon {
  animation: rotateIcon 2s infinite;
  -webkit-animation: rotateIcon 2s infinite;

}

对于HTML，这样做：

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

解决方案详情：

你用错了CSS属性。属性名称是 transform 并且它接受一个函数 rotate(0deg).

CSS 即使添加 -webkit 前缀，动画也无法在 chrome 上运行

CSS animation not working on chrome even by adding -webkit prefixe

html

css

webkit