html - 即使添加 -webkit 前缀，CSS 动画也无法在 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>

我得到不旋转的静态图标。

这是一个片段

我正在开发这个版本的 chrome：86.0.4240.75

标签： htmlcsswebkit

Answer 1

Try this 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;

}

and for HTML, do this:

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

Solution Details:

You have used the wrong CSS property. The property name is transform and it takes a function rotate(0deg).