css transition 实现输入框过渡无需 js，核心是 input:focus、:valid/:invalid 触发，支持 border-color、background-color、box-shadow、transform 等可动画属性，需避坑 outline、移动端键盘卡顿及浮动标签重排问题。
直接用 CSS 的 transition 属性就能实现输入框过渡效果，不需要 JS 或框架；但必须注意触发条件和可动画属性的限制。
哪些 CSS 属性支持 transition 动画
输入框能平滑过渡的属性非常有限，常见且实用的只有这几个：
-
border-color：聚焦时边框变色最常用 -
background-color：背景色渐变（注意透明度变化更自然） -
box-shadow：加阴影提升浮层感，比 border 更柔和 -
transform：微缩放（scale(1.02)）或轻微位移，慎用大变形 -
outline不推荐动画——浏览器原生 focus outline 不支持 transition，强行覆盖反而影响可访问性
input:focus 是核心触发点，但别漏掉 :valid/:invalid
仅靠 :focus 只能响应点击/Tab 聚焦，无法反映输入内容是否合法。HTML5 表单验证后，:valid 和 :invalid 伪类会自动生效，配合 transition 可实现「输错实时反馈」：
- 用户输入邮箱但格式不对 →
input:invalid立即触发动画（如红边 + 抖动） - 输入正确后 →
input:valid平滑过渡为绿边或对勾图标 - 注意：
:invalid在用户未交互前也默认匹配（空值算无效），可用:user-invalid替代（Chrome/Firefox 支持，Safari 16.4+）
示例：
input {
border: 1px solid #ccc;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input:focus {
border-color: #007BFF;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}
input:valid {
border-color: #28a745;
}
input:invalid:not(:placeholder-shown) {
border-color: #dc3545;
}
移动端键盘弹出时 transition 失效？检查 viewport 和 input 类型
在 iOS Safari 或部分安卓 WebView 中，transition 在软键盘弹出瞬间可能卡顿甚至跳过，原因有二：
-
input类型不匹配：用type="text"输入数字，键盘切换频繁，渲染压力大；应改用type="number"或type="email"让系统优化输入体验 -
viewport缺少width=device-width或height=device-height，导致页面重排打断动画帧 - 避免在
input上同时设置transform和box-shadow—— iOS 旧版 WebKit 对复合图层处理不稳定
浮动标签（floating label）的 transition 容易卡顿
浮动标签本质是 label 从 placeholder 位置上移到 input 顶部，依赖 transform + opacity 动画。常见坑：
- 没加
will-change: transform→ 首次动画掉帧 - label 使用
top/left定位而非transform→ 触发 layout，无法硬件加速 - 没监听
input.value和:focus双条件 → 用户清空内容后 label 没回落
关键修复写法：
.input-container label {
position: absolute;
top: 50%;
transform: translateY(-50%);
transition: transform 0.2s ease, opacity 0.2s ease;
will-change: transform;
}
.input-container input:focus + label,
.input-container input:not(:placeholder-shown) + label {
transform: translateY(-20px) scale(0.85);
opacity: 1;
}
真正难的不是写 transition，而是判断什么时候该动、动多少、动完是否可逆——尤其涉及表单验证状态和移动端适配时，一个 not(:placeholder-shown) 就可能决定动画是否“看起来专业”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
