CSS图标hover抖动效果需定义shake动画实现±2px横向微移，周期0.25s、ease-in-out缓动，绑定至:hover并设display:inline-block确保transform生效。
给 CSS 图标添加 hover 时的小范围抖动效果，核心是用 :hover 触发动画，并配合一个轻量、高频、位移极小的 @keyframes 动画。抖动不宜过大或过慢，否则显得突兀；推荐横向微抖（±2px）+ 极短周期（0.2–0.3s），搭配 ease-in-out 让节奏更自然。
1. 定义抖动动画帧
在 CSS 中声明一个名为 shake 的关键帧动画，只做水平方向的轻微偏移（避免上下抖动影响图标对齐）：
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-2px); }
50% { transform: translateX(2px); }
75% { transform: translateX(-2px); }
}2. 绑定到图标元素的 :hover 状态
假设你的图标使用 <i class="icon-home"></i> 或类似结构，直接为该类添加 hover 动效：
.icon-home {
display: inline-block;
transition: transform 0.1s; /* 可选：让进入/离开更顺滑 */
}
<p>.icon-home:hover {
animation: shake 0.25s ease-in-out;
}注意：display: inline-block 是必须的，否则 transform 在内联元素上可能不生效；transition 非必需，但加了能让 hover 离开时更柔和（不强制重置动画）。
立即学习“前端免费学习笔记（深入）”；
3. 防止连续快速悬停触发多次动画
用户反复进出时，动画可能堆积或卡顿。可加 animation-fill-mode: forwards + animation-play-state 控制，但更简单有效的方式是用 animation-delay 配合重置逻辑，或直接加防抖类：
- 推荐做法：加
animation-duration: 0.25s+animation-timing-function: ease-in-out，本身已足够克制 - 进阶控制：用 JS 监听
animationend后移除再添加 class，但纯 CSS 场景下通常不需要 - 如需完全禁止重复触发，可加
animation-play-state: paused初始态，hover 时设为running，但多数情况反而增加复杂度
4. 兼容性与优化提示
现代浏览器（Chrome 43+、Firefox 16+、Safari 9+、Edge 12+）均支持 @keyframes 和 transform。若需兼容旧版 IE，抖动效果需降级为 margin-left 模拟（不推荐，性能差且易引发重排）。
小技巧：
- 抖动幅度建议保持在 ±1px ~ ±3px，超过 4px 就容易“晃眼”
- 动画时长控制在 0.2s–0.35s，太短像抽搐，太长像摇晃
- 避免同时对多个相邻图标启用抖动，会造成视觉干扰
基本上就这些。不复杂但容易忽略的是 display 类型和 transform 的组合前提——只要确保图标可变换、有明确渲染盒，hover 抖动就能干净利落地跑起来。
