width动画常失效，因auto或%等非确定值无法插值；须用px/em/rem等明确单位作起始值，transition写在默认状态，避免与flex混用；推荐max-width或flex方案更稳定。
直接写 transition: width 0.3s 并在 :focus 里改 width，大概率没动画——因为初始 width 是 auto 或百分比，浏览器无法对非确定数值做插值。
为什么 width 动画经常失效
常见错误是这样写：
input { width: auto; transition: width 0.3s; }
input:focus { width: 240px; }
问题出在：auto 不是可动画的 CSS 值，浏览器跳过过渡直接渲染目标尺寸。即使你用 100% 开头，不同父容器宽度也会导致起始值不固定，插值失败。
- 起始值必须是明确像素、em、rem 等可计算单位（比如
width: 50px） -
transition必须写在默认状态（非:focus），否则首次聚焦不会触发 - 避免混用
width和flex控制逻辑，容易冲突
width + padding-left 同时过渡的实操要点
如果你坚持用 width 实现伸长（比如配合搜索图标），关键在于：起始宽度要小且确定，padding-left 用来“藏”图标，两者都参与过渡才自然。
立即学习“前端免费学习笔记（深入）”；
- 初始设
width: 48px（刚好容下图标+少量留白），padding-left: 36px -
:focus时设width: 220px，padding-left: 12px（文字左移，视觉更连贯） - 必须加
box-sizing: border-box，否则边框和内边距会额外撑宽 - 移动端注意：iOS Safari 对
width过渡有渲染延迟，建议同时加will-change: width（仅在聚焦前一刻动态添加，别常驻）
比纯 width 更稳的替代方案
真正线上项目里，width 方案容易在 flex 容器、响应式断点或快速连点时出错。推荐两个更健壮的路径：
- 用
max-width替代width：input { width: 100%; max-width: 120px; transition: max-width 0.3s ease; }→:focus { max-width: 320px; }，兼容性好，IE10+ 可用 - 在 flex 布局中用
flex属性：input { flex: 0 0 120px; transition: flex 0.3s ease; }→:focus { flex: 1; }，自动适应剩余空间，但需注意 IE 对flex过渡支持弱，建议加-ms-flex前缀或降级
最易被忽略的是 viewport 和字体大小——iOS 下若 font-size ，Safari 会强制放大 input 导致伸缩错位；务必加 <code><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> 并设 font-size: 16px。
