使用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 配合关键帧,就能轻松实现图标旋转动画,适用于加载图标、交互反馈等场景。










