表单动画需精准控制：聚焦时用box-shadow替代outline实现呼吸边框；提交按钮禁用状态通过JS切换class添加旋转动画；验证失败用限制次数的shake抖动并响应prefers-reduced-motion；多步骤切换用绝对定位+transform滑动，并在transitionend后手动focus。
表单输入框获得焦点时触发 CSS 动画
用户点击 input 或 textarea 时，用动画突出当前编辑区域，是最常见的交互增强。关键不是加个 transition 就完事，而是要避免与浏览器默认聚焦样式冲突。
- 务必移除原生
outline（否则动画边框和 outline 叠在一起难看）：input:focus { outline: none; } - 推荐用
box-shadow实现呼吸感边框动画，比border更轻量且不触发重排：input { transition: box-shadow 0.3s ease; }<br>input:focus { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); } - 若需更明显效果，可叠加
transform: scale(1.02)，但注意：移动端 Safari 对scale+input组合有渲染抖动，建议加will-change: transform缓解
提交按钮禁用状态的加载动画
表单提交中，把 button[type="submit"] 设为 disabled 后，直接加旋转动画常会失效——因为 disabled 元素不触发伪类、部分动画属性被忽略。
- 不要依赖
button:disabled写动画，改用 JS 切换 class：button.loading { pointer-events: none; }<br>button.loading::after { content: ""; display: inline-block; width: 16px; height: 16px; margin-left: 8px; border: 2px solid #ccc; border-top-color: #3b82f6; border-radius: 50%; animation: spin 1s linear infinite; } -
@keyframes spin必须定义在全局作用域，不能嵌套在媒体查询或其它规则内，否则某些旧版 Chrome 不识别 - 动画中避免使用
transform: rotate()配合display: inline-block，IE11 会跳帧；改用animation-timing-function: steps(8)模拟更稳
表单验证失败时的抖动提示
用户输错邮箱格式、密码太短等场景，用左右抖动（shake）比单纯变红更抓注意力，但容易滥用导致体验烦躁。
- 抖动必须限制次数（通常 2 次），且只对当前出错字段生效，别连带 label 或整个 form：
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-4px); } }<br>input.error { animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both; } - 触发抖动前，先用
getComputedStyle(input).transform检查是否已有动画在运行，避免连续点击多次提交导致动画队列堆积 - 无障碍方面：抖动动画需响应
prefers-reduced-motion媒体查询，否则可能引发眩晕。加一句：@media (prefers-reduced-motion: reduce) { input.error { animation: none; } }
多步骤表单的页面切换过渡
用 fieldset 分步的表单，切换步骤时加滑动/淡入效果，能提升流程感。难点在于 DOM 结构固定，无法像 SPA 那样卸载旧节点。
立即学习“前端免费学习笔记（深入）”；
- 不要对整个
form做opacity动画——会导致所有字段同时淡出，失去焦点管理；应只对当前fieldset和下一个做交叠过渡 - 推荐用
position: absolute+z-index控制层叠，配合transform: translateX()实现左右滑动：fieldset { position: absolute; width: 100%; opacity: 0; transition: opacity 0.3s, transform 0.4s; }<br>fieldset.active { opacity: 1; transform: translateX(0); }<br>fieldset.next { transform: translateX(100%); } - 切步后必须手动调用
input.focus()到第一个可编辑元素，否则键盘 Tab 导航会断掉；且需在transitionend事件里执行，避免动画未完成就聚焦
