使用CSS的@keyframes和transform: rotateZ()可创建图标旋转动画。1. 定义@keyframes spin从0deg到360deg实现完整旋转；2. 将animation属性应用于.icon类，设置时间为2s、线性过渡和无限循环；3. 可调整持续时间、方向或旋转角度实现不同效果；4. 通过will-change: transform启用硬件加速提升性能。适用于加载中或交互反馈场景。
要实现图标旋转动画，可以使用CSS的transform: rotateZ()配合@keyframes来创建平滑的旋转效果。rotateZ() 实际上等同于 rotate()，表示在二维平面内围绕Z轴旋转元素。
1. 定义关键帧动画 @keyframes
通过@keyframes设定旋转的变化过程。比如从0度转到360度：
你也可以写成 from 和 to 的形式：
@keyframes spin { from { transform: rotateZ(0deg); } to { transform: rotateZ(360deg); } }2. 应用动画到图标元素
将定义好的动画绑定到目标图标上，比如一个带有类名 icon 的元素：
立即学习“前端免费学习笔记（深入）”；
.icon { display: inline-block; animation: spin 2s linear infinite; }说明：
- spin：对应上面定义的@keyframes名称
- 2s：动画持续2秒
- linear：匀速旋转
- infinite：无限循环
3. 示例：旋转一个字体图标
假设你使用 Font Awesome 图标：
加上上述CSS后，这个图标就会持续旋转。你还可以调整速度或方向：
- 想让动画慢一点？把
2s改成4s - 想反向旋转？把
linear换成linear reverse或在 keyframes 中改为从360deg到0deg - 只转半圈？改成
rotateZ(180deg)
4. 可选优化：启用硬件加速
为了更流畅的动画表现，可以添加 transform: translateZ(0) 或使用 will-change：
基本上就这些。使用 rotateZ 配合关键帧，就能轻松实现图标旋转动画，适用于加载图标、交互反馈等场景。
