:invalid抖动动画需确保输入框参与原生验证（如加required），配合animation-fill-mode: both和animation: none重置，兼容safari及移动端，并响应prefers-reduced-motion降级为静态提示。
用 :invalid 触发抖动动画前，先确认表单控件是否真能被识别为无效
很多同学加了 :invalid 样式但动画不触发，根本原因是：该输入框没参与原生表单验证。比如 <input type="text"> 默认不会被 :invalid 匹配，除非它有 required、pattern、min/max 等验证属性，或类型本身带语义（如 type="email" 且值格式错误）。
实操建议：
- 给输入框加上
required属性是最简单可靠的触发方式 - 避免只依赖 JS 手动设置
setCustomValidity('')后期望:invalid自动生效——它不会，必须调用reportValidity()或提交表单才会触发伪类更新 -
type="number"在空值时不一定触发:invalid（取决于浏览器），加required更稳妥
抖动动画不能只靠 @keyframes，得配合 animation 和过渡重置
直接写 :invalid { animation: shake 0.3s; } 会出问题：用户反复聚焦/失焦时动画可能叠加、卡顿，或失焦后抖动残留。关键是要让每次验证失败都“重新播放”，且不影响正常交互状态。
实操建议：
- 定义动画时用
animation-fill-mode: both，确保结束帧保留位移归零，避免样式残留 - 必须显式重置
animation属性，例如在:valid或默认状态里写animation: none，否则动画可能持续挂载 - 抖动幅度别太大，
translateX(-4px)到translateX(4px)足够醒目又不干扰布局
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-4px); }
50% { transform: translateX(4px); }
75% { transform: translateX(-4px); }
}
input:invalid {
animation: shake 0.3s ease-in-out;
animation-fill-mode: both;
}
input:not(:invalid) {
animation: none;
}
移动端和 Safari 的 :invalid 行为差异必须处理
Safari（尤其 iOS）对 :invalid 的触发时机更保守：比如用户还没输完就失焦，可能不立即标记为 invalid；部分安卓 WebView 甚至完全忽略 :invalid 对自定义 pattern 的响应。
实操建议：
- 不要把错误反馈完全交给
:invalid—— 它适合辅助视觉提示，核心校验逻辑仍需 JS 配合checkValidity()和setCustomValidity() - 在 JS 校验失败时，手动添加一个类名（如
is-invalid），CSS 同时支持:invalid和.is-invalid，实现降级兼容 - 避免在
:invalid中修改border-color同时又用outline，iOS 上可能闪烁或错位
抖动动画影响可访问性，必须加 prefers-reduced-motion 保护
强制抖动对前庭敏感用户是实际障碍，WCAG 明确要求动画需尊重系统偏好。单纯加 animation: none 不够，要主动检测并禁用。
实操建议：
- 用
@media (prefers-reduced-motion: reduce)将抖动替换为静态高亮（如红色边框 + 图标） - 别只关动画，也检查是否同步移除了
transform，否则可能造成布局偏移残留 - 如果用了 JS 控制抖动（比如监听
invalid事件），同样要在window.matchMedia('(prefers-reduced-motion: reduce)')为 true 时跳过
@media (prefers-reduced-motion: reduce) {
input:invalid {
animation: none;
border-color: #d32f2f;
}
}
抖动只是瞬时反馈，真正容易被忽略的是：用户可能根本没注意到输入框变红或抖动，尤其在长表单中。比起加动画，优先确保错误文案清晰、定位准确、焦点可到达——动画只是锦上添花，不是纠错主力。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
