必须配合@keyframes和animation才能实现持续旋转动效，仅transform:rotate()仅为静态变形；推荐角度±2°、时长2s、ease-in-out缓动、hover触发、infinite循环，并可依需调整transform-origin。
用 CSS transform: rotate() 实现图标按钮的轻微旋转
直接加 rotate() 不会动，必须配合 @keyframes 和 animation 才能形成持续动效。常见错误是只写 transform: rotate(5deg)，结果图标只偏转一次就停住——这不是动画，只是静态变形。
- 旋转角度建议控制在
-3deg到+3deg之间，超过 ±5° 就容易显得突兀 - 动画时长设为
1.5s～2.5s，太快像抖动，太慢失去“轻微”感 - 用
animation-timing-function: ease-in-out让启停更自然，避免线性运动的机械感
给图标按钮（比如 <i class="icon-refresh"></i>）加动效的最小可行代码
假设你用的是 Font Awesome 图标或纯 SVG，只要它是一个可被选中的 HTML 元素，就能套样式。不需要 JS，纯 CSS 即可驱动。
@keyframes subtle-rotate {
0% { transform: rotate(-2deg); }
50% { transform: rotate(2deg); }
100% { transform: rotate(-2deg); }
}
.icon-refresh.rotating {
animation: subtle-rotate 2s ease-in-out infinite;
}
然后在按钮里加上对应 class：<button><i class="icon-refresh rotating"></i>刷新</button>
- 注意：
infinite是循环关键，漏掉就只转一次 - 如果图标是内联元素（如
<i></i>），确保它没被父容器设置display: block或其他影响布局的样式干扰动画渲染 - 某些旧版 Safari 需要加
-webkit-animation前缀，但现代项目基本可忽略
鼠标悬停才启动旋转，而不是一加载就转
很多场景下，自动旋转会分散注意力，尤其在工具栏或表单中。用 :hover 触发更克制、更符合用户预期。
.icon-refresh:hover {
animation: subtle-rotate 1.8s ease-in-out infinite;
}
- 这样默认状态静止，移入后才开始轻柔摆动，交互意图明确
- 如果同时用了
transition（比如颜色变化），注意animation和transition可共存，互不冲突 - 移动端没有 hover，所以这个写法在触屏设备上自然失效——这是优点，不是 bug
用 transform-origin 控制旋转支点位置
默认旋转中心是元素盒模型中心点，但图标常偏小、居左或带文字，导致视觉上“晃得不对”。比如一个带文字的按钮，图标在左侧，绕中心转就会像被拽着甩。
- 加
transform-origin: center left;让它绕左边缘中点转，更稳 - 对纯图标按钮（如独立
<i></i>），用transform-origin: center center;就够了 - 如果图标是 SVG，且内部有
<g></g>或<path></path>，改transform-origin对整个元素生效，不用进 SVG 内部调
动效是否“轻微”，不取决于代码多复杂，而在于角度、时长、缓动曲线和触发时机这四点的组合。调得太细反而失真，留一点呼吸感更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
