transform、transition、animation 的区别和动画性能如何解释？
先理解原理和示例，再练习完整口述与追问。
回答要点
变换值、状态过渡、关键帧序列；布局/绘制/合成；不是所有变换都零成本；减少动态偏好。
原理拆解
transform 定义几何变换，本身不代表随时间播放；transition 在属性值变化时插值；animation 配合 keyframes 定义时间序列，可控制循环、方向和填充等。transform/opacity 常能减少某些布局与绘制工作，但是否合成、纹理大小和图层成本仍由浏览器与内容决定。
示例与推演
.card { transition: transform 160ms ease, opacity 160ms ease; }
.card:hover { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) { .card { transition: none; } }
位置变化不一定要持续修改 top/left；动画结束后清理临时状态。大量 will-change 会占用图层与内存，应用前后要测量。
易错点
transition:all 可能意外动画布局属性；opacity:0 的元素仍可能可点击。变换还可能建立新的层叠上下文或包含块。
参考回答可直接练习口述
transform 描述变换，transition 描述两状态之间的过渡，animation 描述关键帧序列。我选择最小必要动画，测量布局、绘制与图层成本，处理交互和减少动态偏好，不把 GPU 当无限资源。