为何Vite图标无法持续执行旋转动画？

你的代码存在两个核心问题，导致旋转动画无法正常工作：

1. 旋转角度缺少单位：rotateY(360)必须添加角度单位deg，即rotateY(360deg)，否则浏览器无法识别该数值。
2. 动画关键属性缺失：仅指定animation-name不足以触发持续动画——默认动画时长为0、重复次数为1次，自然看不到持续旋转效果。

修改后的完整CSS代码如下：

:root {
  font-family: sans-serif, Arial !important;
}

#main #logo {
  /* 合并设置动画名称、时长、速度曲线、重复次数 */
  animation: spin 2s linear infinite;
}

@keyframes spin {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

关键参数说明：

• 2s：控制单次旋转的时长，可根据需求调整数值
• linear：让旋转过程保持匀速，避免速度波动
• infinite：设置动画无限重复，实现持续旋转效果

TSX代码无需修改，保持原有结构即可。

内容的提问来源于stack exchange，提问作者SahilnCode