css 想让图片在悬停时左右摇摆动画怎么办_使用 transform rotate keyframes 设置左右摆动

左右摇摆动画应采用四关键帧三段式偏移：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，导致动画结束立刻弹回原位（虽然摇摆是循环的，但起始帧不一致仍会闪）。

立即学习“前端免费学习笔记（深入）”；

HaloTool

AI工具在线集合网站

下载

• 给图片加默认 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;
}