:focus边框变色动画不生效，主因是transition未正确声明；须在默认状态写transition: border-color .2s ease, box-shadow .2s ease，并注意兼容性、可访问性及响应式重置。
focus 时边框变色但动画不生效？检查 transition 属性是否写对了
很多人加了 :focus 改 border-color，却没看到过渡效果，根本原因是 transition 没覆盖到目标属性。只写 transition: all .2s 看似省事，但实际会触发重绘、兼容性差；更稳妥的是明确声明：transition: border-color .2s ease, box-shadow .2s ease。
注意两点：
-
transition必须写在「默认状态」（即非:focus）的规则里，否则首次聚焦无动画 - 如果用了
outline: none去掉默认焦点环，记得补上可访问性替代方案（比如用box-shadow） - IE10+ 才支持
border-color的 transition，旧版 IE 会直接跳变
输入框获取焦点后要放大/上浮？用 transform 而不是 width/height
想让输入框 focus 时轻微放大或上移，别改 width 或 height——这会触发 layout，影响性能；优先用 transform: scale(1.02) 或 transform: translateY(-2px)。
实操要点：
-
transform和opacity是仅有的两个能硬件加速的 CSS 属性，动画更顺滑 - 如果同时改
border和transform，transition要写全：transition: border-color .2s, transform .2s - 移动端 Safari 对
transform+input的 focus 响应有时延迟，可加will-change: transform提前提示渲染引擎
响应式下 focus 效果错位？媒体查询里必须重置 transition 触发条件
在小屏设备上，输入框宽度变窄、字体缩小，但如果你只在 PC 断点里写了 transition，缩放后 focus 动画可能突然卡顿或偏移——因为断点切换时，浏览器可能丢弃了部分 transition 状态。
正确做法是：
- 所有涉及响应式的 transition，都在每个关键断点（如
@media (max-width: 768px)）里重新声明，哪怕参数相同 - 避免用
em或rem做 transition 的 timing function 参数（如cubic-bezier(0,0,0,1)是安全的，但transition: transform .2s ease-in-out在不同 font-size 下感知不同） - 如果用了 CSS 自定义属性控制颜色，确保 :focus 里也用 var()，否则媒体查询切换主题色时，focus 颜色不会同步更新
focus 效果在 iOS Safari 上失效？检查 input 类型和 user-scalable 设置
iOS Safari 对 <input type="text"> 的 focus 行为有特殊处理：如果页面 <meta name="viewport"> 里写了 user-scalable=no，部分机型会抑制 focus 伪类触发；另外，type="search" 在 Safari 中默认带内建样式，可能覆盖你的 :focus 规则。
排查顺序：
- 先确认
meta viewport是否含user-scalable=no，临时删掉测试 - 把
<input>显式设为type="text"，避免浏览器自动修正类型 - 在 iOS 上，
:focus不会触发 click 事件，所以不要依赖onclick+:focus双保险逻辑 - 真机调试时，Safari 开发者工具里的「Emulate Focus」功能不可靠，务必用真机 touch 测试
最麻烦的其实是 autofocus 和软键盘弹出时机竞争——这时候 focus 动画还没播完，键盘就把输入框顶上去了。没有银弹，只能用 setTimeout 延迟动画启动，或者干脆在 input 上监听 focusin 事件再手动触发动画类。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
