可用CSS @keyframes配合translateX或rotate实现视觉震动效果：translateX左右位移（±2px~±8px，0.3s–0.6s）模拟抖动，rotate轻微旋转（±0.5°~±2°）增强警觉感，需控制频率、幅度并避免滥用。
在 H5 页面中，可以用 CSS 的 @keyframes 配合 transform: translateX() 或 rotate() 实现类似手机震动、左右摇摆的提示动画，视觉上突出提醒效果。关键不是真实震动（硬件级震动需调用 API），而是用快速位移或旋转模拟“抖动感”。
用 translateX 模拟左右快速位移（推荐）
这是最常用、性能好、兼容性强的方式。通过在极短时间内左右小幅平移元素，制造“震动”错觉。
示例代码：
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-6px); }
50% { transform: translateX(6px); }
75% { transform: translateX(-3px); }
}
.shake-trigger {
animation: shake 0.4s ease-in-out;
}
说明与建议：
- 持续时间控制在 0.3s–0.6s 之间，太长显得拖沓，太短不易察觉
- 位移值建议 ±2px 到 ±8px，避免过大破坏布局或引起不适
- 使用
ease-in-out或cubic-bezier(0.36,0.07,0.19,0.97)让抖动更自然 - 可配合
animation-iteration-count: 2多抖两次增强提示感
用 rotate 模拟轻微倾斜摇摆（适合图标/按钮）
对小图标、消息气泡等元素，轻微旋转比平移更有“警觉感”，但幅度必须非常小，否则易眩晕。
示例代码：
@keyframes wobble {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(-1.5deg); }
50% { transform: rotate(1.5deg); }
75% { transform: rotate(-0.8deg); }
}
.wobble-trigger {
animation: wobble 0.5s ease-in-out;
}
注意点：
- 旋转角度务必控制在 ±0.5° ~ ±2° 内，超过 3° 就容易干扰阅读
- 避免和 translate 同时高频使用，防止渲染抖动或卡顿
- 慎用于大块区域（如整个弹窗），优先用于小尺寸高亮元素（如红点、铃铛图标）
触发时机与交互建议
动画要服务于提示目的，不能滥用。常见合理场景：
- 表单校验失败时，输入框左右轻抖 1–2 次
- 新消息到达时，消息列表项或未读角标轻微晃动
- 倒计时结束、操作超时等紧急状态，用更明显（但不过度）的 shake + 变色
- 用 JS 控制：触发后加 class，动画结束后自动移除，避免重复播放
JS 简单控制示例：
const el = document.querySelector('.alert-btn');
el.classList.add('shake-trigger');
setTimeout(() => {
el.classList.remove('shake-trigger');
}, 400); // 与 animation-duration 一致
兼容性与性能提醒
现代 Android/iOS WebView 均支持 @keyframes + transform，但要注意：
- 避免在低端安卓机上对多个元素同时运行 shake 动画，可能掉帧
- 不使用
left/right位移（会触发重排），坚持用transform（只触发重绘） - 如需真正硬件震动，iOS 不开放，Android 可用
navigator.vibrate()（需用户交互触发，且仅限部分机型） - 无障碍考虑：可监听
prefers-reduced-motion，关闭动画
不复杂但容易忽略。
