图标只抖一下就停了是因为默认 animation 只执行一次，需加 infinite 循环；单向 rotate 不是摇晃，应使用非对称关键帧如 -5deg→3deg→-5deg；位置偏移是因旋转中心不稳或行内元素基线影响，须设 display:block/inline-block、transform-origin:center、vertical-align:middle；生硬问题靠 cubic-bezier(0.36,0.07,0.19,0.97) 和 0.4s~0.6s 时长优化。
用 @keyframes 定义摇晃动画时，为什么图标只抖一下就停了？
因为默认 animation 只执行一次。摇晃需要循环播放，必须显式加 infinite；同时，单纯靠 rotate() 左右偏转不够自然，容易卡顿或方向单一——建议用 rotate(−5deg) → rotate(3deg) → rotate(−5deg) 这类非对称关键帧，模拟真实晃动惯性。
常见错误写法：
@keyframes shake {
0% { transform: rotate(0); }
100% { transform: rotate(-5deg); }
}这样只是单向旋转，不是摇晃。
正确节奏示例：
@keyframes shake {
0%, 100% { transform: rotate(-5deg); }
25% { transform: rotate(3deg); }
50% { transform: rotate(-2deg); }
75% { transform: rotate(4deg); }
}
:hover 触发摇晃时，图标位置偏移、父容器跳动怎么办？
这是 transform: rotate() 导致元素视觉中心偏移引发的重排（reflow）。解决核心是：确保旋转围绕自身中心，且不触发布局变化。
- 给图标加
display: inline-block或display: block，避免行内元素受基线影响 - 强制设置
transform-origin: center（虽然默认就是 center，但显式声明更稳） - 如果图标是
或，检查是否自带vertical-align，建议统一设为vertical-align: middle - 动画属性只用
transform和opacity，别碰margin、left、top等触发布局的属性
摇晃太生硬、像机器人？调参要点有哪些？
摇晃感取决于时间函数（animation-timing-function）和关键帧密度。CSS 默认的 ease 不适合模拟物理晃动。
- 改用
cubic-bezier(0.36, 0.07, 0.19, 0.97)—— 这是较常用的“弹性回弹”曲线，开头快、结尾带点余震 - 动画时长控制在
0.4s ~ 0.6s之间，太短像抽搐，太长失去“悬停反馈”的即时感 - 如果图标尺寸大（比如 48px+），把旋转角度适当放大到 ±8deg，否则晃动感不明显
- 避免在
:hover中叠加多个动画（如同时缩放 + 摇晃），易造成视觉混乱
兼容性与性能要注意什么？
现代浏览器都支持 @keyframes + transform，但老版本 Safari（transform-origin 在 inline 元素上支持不稳定。
立即学习“前端免费学习笔记（深入）”；
- 务必加厂商前缀
@-webkit-keyframes shake和-webkit-animation，尤其要照顾 iOS Safari - 不要对大量图标同时启用该动画（比如表格里每行一个），会触发频繁重绘；可加
will-change: transform提前提示浏览器优化，但仅在必要时用 - 如果图标是字体图标（如 Font Awesome），确认其
font-size是固定值，避免因响应式缩放导致旋转中心漂移
最简可用组合：
.icon:hover {
animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
}
@keyframes shake {
0%, 100% { transform: rotate(-5deg); }
25% { transform: rotate(3deg); }
50% { transform: rotate(-2deg); }
75% { transform: rotate(4deg); }
}
摇晃效果是否自然，关键不在角度多大，而在关键帧分布和缓动曲线是否打破匀速感。 
