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

Question

I'm trying to rotate a mat-icon
in css I'm using the webkit prefix. For information this code is working on 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;
}
In HTML
<mat-icon class="status-icon animatedIcon">
{{getStatusIcon('IN_PROGRESS')}}
</mat-icon>
I'm getting static icon that does not rotate.
Here's a snippet
I'm working on this version of chrome :86.0.4240.75

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).