CSS图标旋转动画需定义@keyframes旋转帧并用animation应用，注意元素display兼容性、避免overflow裁剪，支持方向控制、cubic-bezier节奏调节及hover暂停，图标与文字应分层以确保仅图标旋转。
用 CSS 实现图标旋转动画，核心是结合 animation 和 transform: rotate()。关键在于定义一个旋转的动画帧（@keyframes），再将它应用到图标元素上，并设置持续时间、运动曲线和重复方式。
1. 基础旋转动画写法
最简实现如下：
CSS 部分：
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.icon-spin {
animation: spin 1s linear infinite;
}
说明：
– @keyframes spin 定义从 0° 转到 360° 的完整一圈；
– animation: spin 1s linear infinite 表示：使用 spin 动画，持续 1 秒，匀速播放，无限循环。
2. 图标需支持 transform（注意 display 和 transform 兼容性）
确保图标元素能正常触发 transform，常见情况：
立即学习“前端免费学习笔记（深入）”；
- 如果是内联元素（如
、），建议加display: inline-block或display: block，否则部分浏览器中transform可能不生效； - 若图标来自字体（如 Font Awesome），直接加类即可；若为 SVG，可对
或内部 - 避免父容器设置了
overflow: hidden且尺寸过小，导致旋转时图标被裁剪。
3. 控制旋转方向、速度与暂停
更灵活的写法示例：
.icon-spin-clockwise {
animation: spin 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.icon-spin-counterclockwise {
animation: spin-reverse 1.2s ease-in-out infinite;
}
@keyframes spin-reverse {
from { transform: rotate(0deg); }
to { transform: rotate(-360deg); }
}
/ 鼠标悬停暂停 /
.icon-spin:hover {
animation-play-state: paused;
}
说明：
– cubic-bezier() 可自定义加速/减速节奏；
– 用负角度（如 -360deg）实现逆时针旋转；
– animation-play-state: paused 支持交互式控制。
4. 实用技巧：只转图标，不转文字内容
如果图标和文字在同一个容器里（如按钮），只想让图标转，文字不动：
- 把图标单独包裹一层标签（如
），动画只加在该标签上； - 避免对包含文字的父容器整体设
animation； - 必要时可加
transform-origin: center确保绕中心旋转，不影响布局流。
