H5表单输入错误抖动反馈通过CSS关键帧定义shake动画并用JS动态增删类实现，推荐translateX位移、cubic-bezier缓动及setTimeout清除类，兼顾性能、兼容性与无障碍。
在 H5 表单中实现输入错误时的「抖动（Shake）」反馈，核心是用 CSS 关键帧（@keyframes）定义左右平移动画，并通过 JavaScript 在校验失败时动态添加/移除对应类名。无需依赖框架，原生即可完成，轻量且兼容性好（支持 iOS Safari 9+、Android Browser 4.4+）。
1. 定义 Shake 关键帧动画
抖动本质是元素在水平方向快速小幅度位移。推荐使用 translateX 避免触发重排，性能更优：
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-6px); }
50% { transform: translateX(6px); }
75% { transform: translateX(-3px); }
}
说明：
- 总时长建议设为 0.4s～0.6s，过短不易察觉，过长显得拖沓；
- 位移值（如 ±6px）按容器尺寸微调，表单控件较小时可用 ±3px；
- 避免用
left/right或margin，会引发重排，影响动画流畅度。
2. 创建可复用的抖动样式类
将动画封装为一个类，便于 JS 控制：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
.form-control--shake {
animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}
说明：
-
cubic-bezier(.36,.07,.19,.97)是常用「弹跳感」缓动，比线性更自然； -
both确保动画结束后保持末帧状态（此处末帧是translateX(0)，不影响后续交互）； - 类名加前缀（如
form-control--shake）避免全局污染，也方便 BEM 命名规范。
3. JS 触发抖动（校验失败时）
监听表单提交或失焦事件，在校验不通过时添加类，并在动画结束后自动清除（防止重复添加导致卡顿）：
const input = document.querySelector('#username');
const form = document.querySelector('form');
function triggerShake(el) {
el.classList.add('form-control--shake');
// 动画结束后移除类（0.5s 对应 keyframes 时长）
setTimeout(() => {
el.classList.remove('form-control--shake');
}, 500);
}
input.addEventListener('blur', () => {
if (!input.value.trim() || input.value.length < 2) {
triggerShake(input);
}
});
form.addEventListener('submit', (e) => {
if (!input.value.trim()) {
e.preventDefault();
triggerShake(input);
}
});
说明：
- 不建议用
animationend事件清除类——iOS Safari 旧版本存在兼容问题； - 若需同时抖多个字段，可遍历 NodeList 统一触发；
- 可配合
aria-invalid="true"和aria-describedby提升无障碍体验。
4. 增强体验的小技巧
让抖动更友好、不突兀：
- 限制触发频率：加节流（如 1 秒内最多抖一次），防用户连续失焦反复触发；
- 搭配视觉提示：抖动时同步给边框加红色、显示错误文案，强化反馈；
-
移动端适配：在触摸设备上，可增加
touch-action: manipulation防止误触发滚动。
