transition必须写在默认状态而非仅:hover中，否则移出时无动画；需对transform、opacity等可动画属性使用，并初始化transform: scale(1)、设置background-size双值等细节确保顺滑。
transition 必须写在默认状态，不能只放 :hover 里
鼠标悬停时动画正常、移开却“啪”一下跳回——这是最常见问题。根源是 transition 被错误地只写在 :hover 选择器中。浏览器只在进入 :hover 时应用该规则，离开后规则失效，自然没有退出动画。
正确做法是把 transition 声明放在按钮的基础样式里（比如 .btn 或 button），确保它同时覆盖“进”和“出”两个方向：
.btn {
background-color: #4A90E2;
transition: background-color 0.3s ease-in-out;
}
.btn:hover {
background-color: #1E5799;
}
- 即使只改一个属性，也要保证基础态和悬停态都有明确值（例如
transform: scale(1)→scale(1.05)） - 如果基础态没设
transform，浏览器会从none开始过渡；移出时若没显式重置，可能残留计算值，导致行为不一致
只对可动画化属性用 transition，别碰 display 或 font-size
不是所有 CSS 属性都能过渡。只有「可动画化」的属性才支持 transition，否则会静默失败，你根本看不到效果。
推荐优先使用以下三类属性，它们能触发 GPU 加速、性能好、无重排风险：
立即学习“前端免费学习笔记（深入）”；
-
transform（如scale()、translateY()） opacity-
background-color（注意：从transparent到实色在 Safari 中可能闪烁，建议用渐变填充方案）
必须避免：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
display（不可动画，切换即生效） -
width/height/margin/padding（触发重排，卡顿明显） -
font-size（影响布局流，且部分浏览器渲染不一致） -
transition: all 0.3s（监听所有可动画属性，容易被意外样式变更干扰）
缩放动画必须设初始 transform: scale(1)
部分浏览器（尤其是 Safari 和旧版 Chrome）在元素首次 hover 时，若没声明初始 transform，会把 scale(1) 当作“无变换”，导致第一次动画从隐式 1→1.1 出现微小闪烁或错位。
完整写法示例：
button {
transform: scale(1);
transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
button:hover {
transform: scale(1.15);
}
-
transform-origin默认是center，如需从左上角放大，加transform-origin: top left - 放大后若出现边框/阴影被裁剪，检查父容器是否设置了
overflow: hidden，按钮自身是否需要overflow: visible - 移动端不触发
:hover，这个transform动画在触屏设备上不会自动执行
空心按钮背景填充要用 background-size + linear-gradient
纯边框空心按钮（border + transparent 背景）没法靠 background-color 实现顺滑填充——从透明到实色在 Safari 或旧版 Chrome 中常有闪烁或不连贯感。
稳定做法是用 background-image 配合 linear-gradient 模拟填充，靠 background-size 控制起始状态：
.hollow-btn {
background: linear-gradient(to right, #007bff, #007bff);
background-size: 0% 100%;
background-position: left center;
background-repeat: no-repeat;
transition: background-size 0.3s ease;
}
.hollow-btn:hover {
background-size: 100% 100%;
}
-
background-size必须写成两个值（如0% 100%），单值会被解析为0% 0%，导致悬停时变成等比放大而非横向扩展 - 务必声明
background-repeat: no-repeat，否则渐变会平铺干扰效果 - 如果按钮用了
background: none或background: initial，会清空渐变定义，得改用background: transparent
真正容易被忽略的是：首次渲染时的 transform: scale(1) 初始化、transform-origin 的默认中心点、以及 background-size 必须双值写法——这三个点不处理，动画看起来就“不够顺”，但浏览器完全不报错，调试时极难定位。
