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确保绕中心旋转,不影响布局流。










