problem description

the effect of WeChat Mini Programs development and css-animation animation on the simulator is not consistent with that of the real machine.

the environmental background of the problems and what methods you have tried

try the front end of this site on WeChat Mini Programs : during 122-sharp practice, the effect of
css-animation animation on the simulator is not consistent with that of the real machine.

tried:
0. The original animation simulator is normal, but the real flower icon element css fails to render properly.

animation: fIcoRotating 2s ease-in-out infinite alternate;

1. Modify the original animation roate rotation-> background color background-color change; the real machine displays normally;

@keyframes fIcoRotating {
    0% {
      background-color: -sharpeee;
      /*transform: rotate(0deg);*/
    }
    100% {
      background-color: var(--c);
      /*transform: rotate(calc((var(--n) - 1) * 45deg));*/
    }
}

2. Remove animation and elements render normally.

related codes

wxml

<view id="demo3" class="demoItem">
    <text>DEMO3: </text>
    <view id="flower1" class="flower">
      <icon></icon>
      <icon></icon>
      <icon></icon>
      <icon></icon>
      <icon></icon>
      <icon></icon>      
      <icon></icon>
      <icon></icon>
   </view>
</view>

css

.flower{
  margin: 1em auto;
  width: 6em;
  height: 6em;
  font-size: 30px;
  background-color: -sharpeee;
  border-radius: 20%;

  position: relative;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  padding: 0.5em;
}
.flower icon{
  position: absolute;
  width: 22.5%;
  height: 37.5%;
  border-radius: 50% / 30%;

  transform-origin: center 105%;
  transform: rotate(calc((var(--n) - 1) * 45deg));

  background-color: var(--c);
  /*  */
  mix-blend-mode: multiply;

  animation: fIcoRotating 2s ease-in-out infinite alternate;
}
/* .flower:active icon{
  animation: rotating 2s ease-in-out forwards;
} */
@keyframes fIcoRotating {
    0% {
      background-color: -sharpeee;
      transform: rotate(0deg);
    }
    100% {
      background-color: var(--c);
      transform: rotate(calc((var(--n) - 1) * 45deg));
    }
}
.flower icon:nth-child(1) {
    --n: 9;
    --c: rgba(243, 156, 18, 0.7);
}

.flower icon:nth-child(2) {
    --n: 2;
    --c: rgba(241, 196, 15, 0.7);
}

.flower icon:nth-child(3) {
    --n: 3;
    --c: rgba(46, 204, 113, 0.7);
}

.flower icon:nth-child(4) {
    --n: 4;
    --c: rgba(27, 188, 155, 0.7);
}

.flower icon:nth-child(5) {
    --n: 5;
    --c: rgba(65, 131, 215, 0.7);
}

.flower icon:nth-child(6) {
    --n: 6;
    --c: rgba(102, 51, 153, 0.7);
}

.flower icon:nth-child(7) {
    --n: 7;
    --c: rgba(155, 89, 182, 0.7);
}

.flower icon:nth-child(8) {
    --n: 8;
    --c: rgba(242, 38, 19, 0.7);
}

what result do you expect? What is the error message actually seen?

look forward to solving.