Bootstrap 5浮动标签动画依赖:placeholder-shown等伪类触发，非JavaScript实现；需严格遵循input在label前、带placeholder属性、套.form-floating容器的结构，且仅text/email/password/textarea类型可靠支持。
浮动标签的动画依赖于 form-floating 的 DOM 结构和 CSS 状态切换
Bootstrap 5 的 form-floating 本身不提供动画，它只靠 :focus、:not(:placeholder-shown) 和 :valid 这几个伪类触发标签上浮。动画必须手动加在 .form-floating label 上，且只能作用于 transform 和 opacity —— 因为标签是绝对定位，其他属性（比如 top）会破坏原生行为。
常见错误是直接给 label 加 transition: all .3s，结果输入框获得焦点时标签乱跳，甚至文字被裁切。根本原因是 Bootstrap 把 label 的初始 transform 设为 translateY(0)，上浮后设为 translateY(-1.5rem) scale(.85)，你得顺着这个逻辑补 transition。
- 必须只写
transition: transform .2s ease, opacity .2s ease，避免影响top、left等布局属性 - 要覆盖 Bootstrap 默认的
transition: none，所以选择器优先级至少和.form-floating label持平或更高 -
opacity是可选的，但加上能让标签淡入更自然；注意不要设opacity: 0初始态，否则 placeholder 文字会透出干扰阅读
如何让未聚焦时的标签也带轻微位移动画（非默认行为）
Bootstrap 默认只在聚焦/有值时动，如果想让鼠标悬停输入框就提前触发轻量上浮（比如 translateY(-0.3rem)），就得自己扩展状态。不能用 :hover 直接作用于 label（它不在输入框上方），而要利用父容器 .form-floating 的 hover 状态 + 后代选择器。
但要注意：这种“预上浮”容易和真实聚焦冲突。比如用户 hover 后立刻点击，两个 transform 动画会打架。稳妥做法是只对非空/非聚焦态生效：
立即学习“前端免费学习笔记（深入）”；
- 写
.form-floating:hover:not(.focused) label:not(.floating-label-active)这类组合选择器（需配合 JS 打标） - 或者更简单：只在
input:focus-visible + label和input:not(:placeholder-shown) + label上加动画，放弃 hover 预演 - 若真要 hover 效果，建议改用
transform: scale(1.02)微调，避开 vertical 位移，减少冲突风险
form-control 高度变化时，浮动标签动画错位怎么办？
一旦你通过 height、padding 或 font-size 改了 .form-control 的尺寸，Bootstrap 内置的 translateY(-1.5rem) 就会失准——因为 1.5rem 是按默认 font-size: 1rem 和 line-height: 1.5 算的。标签上浮位置偏高或偏低，动画过程看起来像“卡顿”或“弹跳”。
解决方法不是调 transform 数值，而是重置整个浮动逻辑的基准：
- 用 CSS 变量覆盖 Bootstrap 的计算依据：
--bs-form-floating-height: calc(3.5rem + 2px)（含 border） - 然后在
.form-floating label中把translateY()改成基于该变量的计算：translateY(calc(var(--bs-form-floating-height) / -2)) - 更推荐方式：删掉原生
form-floating，用自定义 class（如.my-floating）完全重写结构 + 动画，避免被 Bootstrap 的 JS 行为干扰（比如某些版本会在input值变时强制重置label位置）
移动端 Safari 中浮动标签动画卡顿或失效
iOS Safari 对 transform + opacity 的硬件加速支持不稳定，尤其当父容器有 overflow: hidden 或使用了 backface-visibility: hidden 时。最典型现象是：标签上浮一半就停住，或动画结束后突然跳到终点。
这不是代码写错，而是渲染管线被阻塞。绕过方式很具体：
- 给
.form-floating label强制开启 GPU 加速：transform: translateZ(0)或will-change: transform（仅在动画期间加，别常驻） - 禁止 Safari 对
label做字体抗锯齿优化：-webkit-font-smoothing: subpixel-antialiased - 如果用了
prefers-reduced-motion媒体查询，确保没意外禁用所有 transition —— 浮动标签动画属于 UI 必要反馈，不该被降级
真正难调试的是多层嵌套表单里浮动标签的堆叠上下文（z-index）错乱，这时候动画看起来像“消失”，其实是被兄弟元素遮住了。检查 .form-floating 是否被 position: relative 的父容器裁切，比调动画参数更重要。
