hover时用transform translateY实现下落动画必须加transition，且需写在默认状态上，推荐transition: transform 0.3s ease-out；下落须用正数如translateY(12px)，避免overflow截断、单位用px更可控，注意transform不影响文档流及IE11兼容性。
hover时用transform translateY实现下落动画，必须加transition
不加transition，transform: translateY()在悬停时会瞬间跳变，没有“下落”感。浏览器不会自动补间，这是最常被忽略的前提。
-
transition要写在默认状态（非:hover）上，否则首次悬停无动画 - 推荐只过渡
transform，避免all引发意外重排或性能抖动 - 典型写法：
transition: transform 0.3s ease-out;，ease-out比linear更接近真实下落的减速感
translateY数值方向别搞反：正数是向下，负数是向上
很多人试了没效果，其实是把translateY(20px)写成translateY(-20px)——后者是上移，看起来像“缩进”或消失，不是下落。
- 下落 = 元素从原位置向下位移 → 必须用
positive值，如translateY(12px) - 如果容器有
overflow: hidden，且下落距离过大，内容可能被截断，需检查父容器高度和overflow设置 - 用
px比em或rem更可控，避免因字体缩放导致下落距离失真
transform不影响文档流，但可能遮挡其他元素
transform只是视觉位移，元素原始占位还在。下落后若和其他块级元素重叠，不是动画问题，是布局逻辑没处理好。
- 下落元素不会推开下方兄弟元素，想“推着下面一起动”得改用
margin-top或top+position: relative（但性能不如transform） - 如果需要下落时触发父容器高度变化，
transform做不到，得换思路，比如用max-height过渡或JS控制height - 在IE11中
transform需加-ms-前缀，但translateY本身兼容性很好，现代项目通常不用管
移动端hover无效？得靠:focus-within或JS模拟
纯CSS :hover在触摸设备上基本不可靠——手指点下去没“悬停”概念，iOS Safari甚至默认禁用:hover伪类。
立即学习“前端免费学习笔记（深入）”；
- 简单替代：给容器加
tabindex="0"，用:focus-within捕获点击后的焦点态 - 更稳妥：监听
touchstart加临时class，用JS切换is-dropped类，再配CSS过渡 - 别依赖
@media (hover: hover)做判断，很多安卓机返回none，实测不准
translateY本身，而在timing function选型和初始/结束状态的布局配合。动效容易调，但动完之后的视觉节奏和交互反馈，往往才是用户真正感知到的“下落”。 
