transition 对 top/bottom 不生效，是因为元素未显式设置初始 top 值（如 top: 0），或与 transform 冲突；推荐改用 transform: translateY() 配合 transition，更稳定且硬件加速。

transition 为什么对 top/bottom 不生效？

直接给 position: relative 的元素加 transition: top 0.3s，但鼠标悬停时标题没动——大概率是没触发重排或属性不可动画。CSS 可动画属性里，top 确实支持，但前提是元素得有初始 top 值（不能靠默认值“隐式存在”），且不能和 transform 冲突。

• 必须显式写 top: 0 或 top: 20px，不能只写 position: relative 就指望它从“无偏移”开始过渡
• 如果同时用了 transform: translateY()，浏览器会优先用 transform，忽略 top 的变化，导致 transition 失效
• 父容器没有触发 BFC（比如没设 overflow: hidden）时，relative 偏移可能造成布局抖动，间接干扰动画感知

用 transform + transition 实现更稳的上移

比起操作 top，用 transform: translateY() 是更推荐的做法：硬件加速、不触发重排、兼容性好（IE10+ 都行），而且语义更清晰——“我要移动这个元素”，而不是“我要改变它的定位偏移”。

• 初始状态写 transform: translateY(20px)，让标题默认在下方藏住
• 悬停时改为 transform: translateY(0)，配合 transition: transform 0.3s ease-out
• 别忘了加 will-change: transform（可选），对长卡片或高频交互场景能提前优化渲染路径
• 如果卡片内容本身有 padding/margin，要确保上移距离刚好对齐视觉预期，比如 translateY(-8px) 比 -20px 更自然

hover 触发时机和边界问题

标题上移后，鼠标一离开标题区域就立刻回落，有时还没看清文字就缩回去了——这不是 transition 写错了，而是 hover 绑定范围太小。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 不要只给 .card-title 加 :hover，应该把状态绑定到整个卡片容器（比如 .card:hover .card-title）
• 如果标题用 position: absolute 脱离文档流，要确认父容器有 position: relative，否则 transform 仍有效，但定位基准可能错乱
• 移动端没有 hover，需额外加 focus-within 或 JS touchstart 模拟，否则纯靠 tap 无法触发

字体渲染与动画卡顿的隐蔽原因

动画看起来“顿”或者“闪一下”，尤其在低配安卓机上，往往不是 transition 时间设短了，而是字体抗锯齿或 subpixel 渲染被 transform 干扰。

立即学习“前端免费学习笔记（深入）”；

• 加 backface-visibility: hidden 或 transform: translateZ(0) 强制开启 GPU 层，能缓解部分模糊/闪烁
• 避免在动画中同时改变 font-size 或 line-height，这些会触发 layout，打断 transform 的合成帧
• 如果标题用了 web font，确保 font-display: swap，否则首屏加载时 fallback 字体突然切换，可能让 translateY 的起始位置偏移

事情说清了就结束。最常漏掉的是 hover 作用域和 transform 的初始值——写完记得检查两遍：父容器有没有 relative，标题有没有显式 translateY 初始值，以及你到底是在 hover 哪个元素。