CSS如何制作输入框聚焦动画_利用focus伪类与transition

CSS如何制作输入框聚焦动画_利用focus伪类与transition需要先看清适用场景和关键步骤，避免只记结论却忽略实际限制。

:focus伪类失效主因是元素不可聚焦，如div需加tabindex="0"；Safari存在触发时机严格、部分type失效等问题；动画应选border-color等可过渡属性，兼顾可访问性需用box-shadow替代outline并确保键盘导航可见。

focus伪类为什么没生效

最常见的原因是元素本身不支持 :focus，比如 <div> 默认不可聚焦。只有表单控件（<input>、<textarea>、<select>）或加了 tabindex 的元素才能触发 :focus。

实操建议：

1. 检查目标元素是否为原生可聚焦标签；如果不是，加上 tabindex="0"
2. 避免用 outline: none 后不提供替代焦点样式——这会破坏可访问性，也容易误以为 :focus 失效
3. 某些 CSS 重置库（如 Normalize.css）会默认清除 outline，需手动恢复或改用 box-shadow 模拟

transition动画卡顿或不触发

transition 只对可计算的、支持动画的 CSS 属性起作用。像 display、height（从 0 到 auto）、visibility 这类属性无法平滑过渡。

实操建议：

1. 聚焦动画优先用 border-color、box-shadow、transform、opacity 等硬件加速友好属性
2. 写法必须完整：比如 transition: border-color 0.2s ease, box-shadow 0.2s ease；只写 transition: all 0.2s 容易拖慢性能且不可控
3. 确保初始状态和 :focus 状态都明确声明了被过渡的属性值，否则浏览器无法插值

input:focus + transition 在 Safari 上失效

Safari 对 :focus 的触发时机更严格：点击输入框时可能先触发 :focus，但若鼠标快速移开，动画来不及播完就被中断；另外，iOS Safari 默认禁用非 input 类型的 :focus 样式（如 type="number" 或自定义 contenteditable）。

实操建议：

1. 给 <input> 显式设置 type，避免用 type="text" 以外又未适配的类型（如 type="search" 在部分 Safari 版本中表现异常）
2. 加一层 will-change: border-color 或 transform 提前提示渲染引擎优化
3. 必要时用 JS 监听 focusin / focusout 事件补一层 class 控制动画，绕过伪类兼容问题

如何让聚焦动画兼顾可访问性

纯靠颜色变化（比如边框变蓝）对色觉障碍用户几乎不可见；而仅依赖 outline 又难看、难定制。真正可用的方案得同时满足视觉反馈 + 键盘导航识别 + 屏幕阅读器感知。

实操建议：

1. 用 box-shadow 替代 outline：它可自由控制大小、模糊、颜色，且不影响布局
2. 保留 outline: none 仅在有足够强的替代样式后才启用，否则必须留着原生 outline
3. 测试键盘 Tab 导航时能否清晰看到当前焦点位置——这是比“动画好不好看”更关键的判断标准

最常被忽略的一点：动画持续时间别超过 0.3 秒。太快用户感知不到，太慢则干扰操作节奏，尤其在表单连续填写场景下。