CSS悬停图标摇晃效果实现教程

最近发现不少小伙伴都对文章很感兴趣，所以今天继续给大家介绍文章相关的知识，本文《CSS悬停图标摇晃动画实现方法》主要内容涉及到等等知识点，希望能帮到你！当然如果阅读本文时存在不同想法，可以在评论中表达，但是请勿使用过激的措辞~

图标只抖一下就停了是因为默认 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 等触发布局的属性

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

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