transition必须写在基础状态而非:hover中，否则移出时无过渡；应仅过渡transform和opacity以保性能；transform-origin决定缩放锚点，timing-function影响动画节奏。
transition 必须写在基础状态，不能只写在 :hover 里
很多人写完 transform: scale(1.2) 发现鼠标移开时“啪”一下跳回原样，动画只单向生效——根本原因是把 transition 放错了位置。浏览器只对「有 transition 定义的状态」到「无 transition 定义的状态」做平滑处理；如果 transition 只出现在 :hover 里，移出时就没了过渡依据。
正确做法是把 transition 写在元素的默认样式中：
-
transition必须声明在基础类（如.card），而非.card:hover - 哪怕只过渡
transform，也要明确写成transition: transform 0.3s ease，别偷懒用all - 如果同时过渡多个属性（比如
transform和opacity），用逗号分隔：transition: transform 0.3s ease, opacity 0.3s ease
只过渡 transform 才能保证性能不掉帧
不是所有 CSS 属性都适合用 transition。像 width、height、margin 这类会触发重排（reflow）的属性，动画容易卡顿；而 transform 和 opacity 由 GPU 合成层处理，基本稳在 60fps。
所以除非真有布局变化需求，否则：
- 避免用
transition: width 0.3s实现缩放，改用transform: scale() - 不要对
display做过渡（它不可动画），要用opacity+visibility组合替代 - 如果缩放后需要保持新尺寸占位，别依赖
transform—— 它不改变文档流，该用scale()就用，别强行套布局属性
transform-origin 决定缩放“从哪开始”
默认情况下 transform: scale(1.5) 是以元素中心为基点放大，但有时你需要左上角拉伸、底部锚定、或跟随鼠标位置缩放。这时必须配合 transform-origin。
常见取值和效果：
-
transform-origin: center（默认）→ 从中点放大 -
transform-origin: top left→ 左上角不动，向右下延伸 -
transform-origin: 50% 100%→ 底边中点为锚点，适合“弹出式”卡片 - 动态场景下可用 JS 设置：
el.style.transformOrigin = `${x}px ${y}px`，实现鼠标跟随缩放
transition-timing-function 影响动画“呼吸感”
ease 是默认值，但它在多数交互中显得太“软”，尤其缩放类动画容易拖沓；ease-out 或 cubic-bezier(0.25, 0.46, 0.45, 0.94) 更利落。
几个实用建议：
- 鼠标悬停缩放推荐
ease-out：进入快、收尾缓，不突兀 - 点击反馈类（如按钮按压）用
ease-in-out，前后节奏对称 - 避免全用
linear，除非是机械感 UI；人眼对匀速运动更敏感，稍有卡顿就明显 - 调试时打开 Chrome DevTools 的“Animations”面板，勾选 “Show timeline”，能直观看到贝塞尔曲线是否合理
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
