CSS图标悬停摇晃动画实现方法

本文详解了如何用CSS实现自然流畅的图标悬停摇晃动画，直击开发者常遇的三大痛点：图标只抖一下就停（需添加infinite循环与非对称关键帧如-5deg→3deg→-5deg）、位置偏移或父容器跳动（通过display:inline-block/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 等触发布局的属性

摇晃太生硬、像机器人？调参要点有哪些？

.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); }
}