如何解决即使添加 -webkit 前缀,CSS 动画也无法在 chrome 上工作
我正在尝试旋转 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
解决方法
试试这个 CSS:
<mat-icon class="status-icon animatedIcon">
{{getStatusIcon('IN_PROGRESS')}}
</mat-icon>
对于 HTML,请执行以下操作:
transform
解决方案详情:
您使用了错误的 CSS 属性。属性名称为 rotate(0deg)
,它采用函数 onShippingChange
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。