左右摇摆动画应采用四关键帧三段式偏移：0%和100%为-5deg，25%为5deg，50%为-5deg，75%为5deg，配合ease-in-out或自定义cubic-bezier、transform-origin:center、will-change:transform及overflow:hidden等优化方案。
用 @keyframes 实现左右摇摆动画的关键帧怎么写
左右摇摆不是简单地从 0° 到 10° 再回来，那样会停顿、不自然。真正模拟“摇摆”需要三段式偏移：先向右倾 → 回中 → 再向左倾 → 回中，形成周期性晃动。直接写 0% { transform: rotate(0deg); } 50% { transform: rotate(10deg); } 100% { transform: rotate(0deg); } 只是单侧抖动，缺乏摇摆感。
推荐写法：
@keyframes sway {
0%, 100% { transform: rotate(-5deg); }
25% { transform: rotate(5deg); }
50% { transform: rotate(-5deg); }
75% { transform: rotate(5deg); }
}
这样在 0→25% 向右摆，25→50% 回左，50→75% 再向右，75→100% 回左——视觉上更接近连续摇摆。数值 ±5deg 比 ±10deg 更稳妥，大幅旋转容易让图片边缘裁切或触发 layout 偏移。
:hover 下如何绑定动画并控制行为
仅加 animation 不够，必须同时处理初始态、过渡平滑性和重复逻辑。常见错误是忘记设默认 transform: rotate(0)，导致首次悬停跳变；或漏掉 animation-fill-mode: forwards，导致动画结束立刻弹回原位（虽然摇摆是循环的，但起始帧不一致仍会闪）。
立即学习“前端免费学习笔记（深入）”；
- 给图片加默认
transform: rotate(0)，避免无动画时因父容器变形影响布局 - 用
animation: sway 1.2s ease-in-out infinite——ease-in-out让摆动两端减速，更拟真；infinite是必须的，否则只晃一次 - 加
transform-origin: center确保绕图中心旋转，否则可能偏移出容器
img.sway-on-hover {
transform: rotate(0);
transform-origin: center;
}
img.sway-on-hover:hover {
animation: sway 1.2s ease-in-out infinite;
}
为什么图片悬停后位置偏移或被裁剪
摇摆动画本身会扩大元素的绘制边界，尤其当图片没设 overflow: hidden 或父容器尺寸固定时，rotate 后的角点可能超出容器范围，触发滚动条或视觉截断。这不是 bug，是 CSS transform 的正常渲染行为。
解决方式取决于场景：
- 若父容器可弹性：给父元素加
overflow: hidden，最直接 - 若需保留完整图片可见：改用
scale(0.98)配合 rotate，预留 2% 缩放余量防溢出 - 若图片是背景图：优先用
background-position微调 +transform: translateX()模拟晃动，比 rotate 更安全
移动端 Safari 上动画卡顿或不触发怎么办
iOS Safari 对 transform: rotate() 的硬件加速支持不稳定，尤其在低配设备上，单纯靠 @keyframes 容易掉帧。必须手动开启 GPU 加速，并避免同时触发布局计算。
关键补丁：
- 在动画元素上加
will-change: transform（仅 hover 时加更佳，避免常驻开销） - 确保没有其他属性（如
width、margin）在 hover 中变化，否则会强制重排 - 把
animation-timing-function改成cubic-bezier(0.34, 1.56, 0.64, 1)，这个值在 Safari 中比ease-in-out更顺滑
img.sway-on-hover:hover {
animation: sway 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
will-change: transform;
}
实际用的时候，±5deg 和 1.2s 是平衡自然感与可用性的起点。调大角度或缩短时间会让效果更戏剧化，但也更容易引发视觉不适或布局问题。别忘了测试真实设备上的首屏加载表现——动画资源虽小，但多个图片同时启播仍可能拖慢低端机。 
