transition必须写在基础选择器中而非:hover里，否则移出时无过渡；仅opacity、transform等可硬件加速属性适合过渡，display等不可插值属性不支持。
按钮过渡效果必须写在基础样式里，不能只塞进 :hover 中，否则鼠标移出时动画直接消失。
transition 必须放在默认状态，不是 :hover 里
常见错误是这样写：
.btn:hover { transition: background-color 0.3s ease; }
结果就是悬停进来有动画，一移走就“啪”地跳回原样。因为浏览器只在 :hover 生效时才读这个 transition，离开后规则失效，自然没退出动画。
正确写法是把 transition 放到按钮的基础类或元素选择器中：
-
.btn或button基础样式里声明transition - 确保进入和退出都受控，比如
background-color、transform、opacity都要有明确的起止值 - 如果用
transform: scale(1)，基础态就得写上，不能留空；否则移出时浏览器从none回退，行为不可预测
只对可动画化属性用 transition
不是所有 CSS 属性都能平滑过渡。写了也白写的有：display、font-size、z-index、margin、padding —— 它们要么静默失败，要么触发重排，卡顿明显。
推荐优先使用这些：
-
opacity：开销低，兼容稳 -
transform（如scale()、translateY()）：触发 GPU 加速，最顺滑 -
background-color、color、border-color：可用，但深色/浅色模式切换时可能显生硬 -
max-height：适合展开收起，但必须设具体数值（比如0→200px），不能用auto
别用 transition: all，也别乱配 timing-function
transition: all 0.3s 看似省事，实际容易翻车：比如 box-shadow 每次重绘都算变化，导致意外抖动；又或者 outline、visibility 这类属性根本没法动，还占资源。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
多个属性过渡要分别指定函数，顺序必须严格对应：
transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
如果只写一个 cubic-bezier() 却列了两个属性，第二个会回退到默认 ease，容易误判效果。
缓动函数选型建议：
- 通用场景用
ease或ease-in-out - 想强调轻快反馈，用
cubic-bezier(0.25, 0.8, 0.25, 1)（类似 iOS 弹性） - 避免纯
linear，视觉上太机械；也慎用ease-in，开头太慢，按钮响应像迟钝
渐变按钮流动动画要绕开 background-image
直接对 background: linear-gradient() 写 transition 是无效的——background-image 不可动画，浏览器直接忽略。
真正能动的是 background-position 和 background-size：
- 必须设
background-size: 200% 200%（或更大），否则位移没空间 - 基础态
background-position: 0% 50%，悬停改到100% 50%，配合水平渐变（90deg）才能左右滑动 - 别写
background-position: right，语义模糊，各浏览器解析不一致 - 圆角按钮要注意边缘露底色，可加
overflow: hidden或微调border-radius
移动端快速进出 hover 区域时，动画常卡在中间态，这时候 transition 就不如 @keyframes + animation-play-state 可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
