使用 transform 和 transform-origin 可提升 css 动画性能，1. 优先用 transform 实现位移、缩放避免重排；2. 设置 transform-origin 控制旋转中心；3. 结合 will-change 和 contain 隔离图层；4. 使用合适缓动函数与短时长保持流畅。
在使用 CSS 动画时，animation 与 transform-origin 配合得当，能显著提升动画的流畅度和视觉表现。关键在于理解它们如何影响渲染层、重绘与合成过程。
利用 transform 实现高性能动画
CSS 动画中，直接改变 width、height、top、left 等属性会触发布局重排和重绘，开销较大。而 transform 属性（如 translate、scale、rotate）可以在不触发重排的情况下完成动画，浏览器通常将其交由 GPU 处理，实现硬件加速。
推荐做法：
- 用
transform: translateX()替代left位移 - 用
transform: scale()替代修改width/height - 配合
will-change提示浏览器提前优化图层
transform-origin 控制变换基准点
transform-origin 决定旋转、缩放等变换的中心点。默认是元素中心（50% 50%），但某些动画需要调整该原点以符合设计意图。
例如制作一个绕左上角旋转的图标：
.element {
transform-origin: 0 0;
animation: rotate 1s linear infinite;
}
@keyframes rotate {
to { transform: rotate(360deg); }
}
如果不设置 transform-origin，旋转会围绕中心，可能造成布局偏移或视觉错位。正确设置可让动画更精准，避免额外的 position 调整，减少 reflow。
结合 animation-timing-function 优化视觉流畅性
使用合适的缓动函数能让 transform 动画更自然。例如 ease-out 让动画结束更柔和，cubic-bezier(0.4, 0, 0.2, 1) 可模拟弹簧效果。
同时，短时间、小幅度的 transform 动画更容易保持 60fps，建议控制 duration 在 200ms–500ms 之间，避免复杂 keyframes 导致性能下降。
避免隐式布局问题
当 transform-origin 偏离默认中心时，元素视觉位置会变，可能影响周围布局流。解决方法：
- 对需要独立变换的元素设置
position: absolute或放在独立图层 - 使用
transform: translate()调整视觉位置，而非 margin 或 top/left - 为频繁动画的元素添加
contain: strict或will-change: transform，帮助浏览器隔离渲染
基本上就这些。合理使用 transform 和 transform-origin，配合恰当的 animation 设置，能让动画既美观又高效。关键是尽量只触 GPU 友好属性，减少浏览器计算压力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
