:invalid伪类仅在含required或type="email"等原生校验属性的表单控件值不满足时触发；需配合animation实现动效，transition无效；IE完全不支持，旧版Safari存在兼容问题。
input:invalid 伪类什么时候会触发
它只在表单控件有 required、type="email" 等原生校验属性，且当前值不满足时才生效。不是 JS 手动加 setCustomValidity() 或 class 就能触发的——那些得靠 JS 配合 :not(:valid) 或自定义类来模拟。
- 常见误判：给
input加了class="error"，但没加required，:invalid完全不匹配 - type 必须有效：比如
type="number"输入字母才会触发，type="text"永远不会触发:invalid - 空值判断依赖
required：没这个属性，即使输入为空，:invalid也不生效
animation 要配合 transition 还是 animation
用 animation 更可控，因为 :invalid 是状态切换，不是连续变化；而 transition 依赖属性“渐变”，但 :invalid 是布尔态，CSS 无法对伪类本身做过渡。
- 正确做法：定义一个关键帧动画（如
@keyframes shake），在input:invalid中调用animation: shake 0.3s ease-in-out - 错误尝试：写
input:invalid { border-color: red; transition: border-color 0.2s; }—— 这个 transition 永远不会执行，因为没有“从 valid 到 invalid”的属性中间态 - 注意重播：默认动画只在状态变更时播放一次，如需每次失焦都动，得用 JS 触发
animation-name变更或加animation-fill-mode: forwards后手动重置
:invalid 动效容易被忽略的兼容性问题
IE 完全不支持 :invalid，Safari 旧版本（type="date"）的 :invalid 行为不一致；而且动画在表单提交前集中触发，可能造成批量抖动。
- 移动端 Safari 在软键盘收起后才更新
:invalid状态，导致动效延迟 - Chrome 对
input:invalid:focus的样式优先级高于普通:invalid，容易覆盖动画 - 如果用了
appearance: none或自定义 border，确保outline和box-shadow不被意外清除，否则抖动效果看不见 - 推荐兜底：加一层
input.error类，由 JS 在checkValidity()后手动增删，和:invalid并行控制
一个轻量可用的 shake 动效写法
不用第三方库，5 行 CSS 解决基础反馈：
立即学习“前端免费学习笔记（深入）”；
input:invalid {
animation: shake 0.3s ease-in-out;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-2px); }
50% { transform: translateX(2px); }
75% { transform: translateX(-2px); }
}
- 别用
scale或rotate：视觉干扰大，影响可读性 - 位移控制在 ±2px 内：太大像 bug，太小看不出
- duration 别超 0.4s：超过用户会觉得卡顿，低于 0.2s 又显得仓促
- 如果 input 有
padding或border-box，确保父容器overflow: visible，否则抖动会被裁掉
:invalid 依赖原生表单语义——丢掉 required 或写错 type，后面所有动效都白搭。 
