使用 transform: scale() 结合硬件加速和合理 Flex 布局设置可解决图片缩放动画不流畅问题。1. 优先使用 transform 实现动画，避免重排；2. 设置 align-items 为 center 或 flex-start 防止对齐跳动；3. 添加 will-change: transform 和 transform-origin: center center 提升渲染性能；4. 确保父容器 overflow: visible 或增加外层容器避免裁剪。通过优化合成层与布局稳定性，实现平滑缩放效果。
在使用 Flex 布局时，对图片应用 transform: scale() 实现缩放动画，有时会出现动画不平滑、闪烁或布局抖动的问题。这通常是因为元素在缩放过程中触发了重排（reflow）或硬件加速未正确启用。结合 animation 与 transform 并合理设置 align-items 等 Flex 属性，可以有效优化动画表现。
启用硬件加速提升动画流畅度
通过 transform 触发 GPU 加速，避免浏览器在 CPU 上频繁重绘。在关键帧动画中优先使用 transform: scale() 而非修改宽高或透明度等可能引发重排的属性。
@keyframes zoomIn {
from { transform: scale(1); }
to { transform: scale(1.2); }
}
<p>img:hover {
animation: zoomIn 0.3s ease-in-out forwards;
}</p>使用 transform 不仅性能更高，还能避免影响文档流，减少布局抖动。
避免 align-items 引起的对齐跳动
Flex 容器默认的 align-items: stretch 可能使子元素在缩放时因高度变化而重新计算对齐方式，导致视觉上的“弹跳”。
立即学习“前端免费学习笔记（深入）”；
将 align-items 设为 flex-start、center 或 baseline，可固定垂直对齐基准，防止缩放过程中的位置偏移。
.flex-container {
display: flex;
align-items: center; /* 或 flex-start */
justify-content: center;
}
如果容器内有多个子元素，确保图片本身不被拉伸，可额外设置 align-self: flex-start; 来单独控制。
添加 will-change 和 transform-origin 优化细节
提前告知浏览器该元素将发生变换，有助于提前创建合成层。
img {
will-change: transform;
transform-origin: center center;
display: block; /* 避免 inline 元素基线问题 */
}
transform-origin 确保缩放围绕中心点进行，避免偏移错位。will-change 谨慎使用，仅用于频繁动画的元素。
确保父容器不约束变换空间
Flex 容器若设置了 overflow: hidden，可能裁剪缩放后超出的部分，造成视觉突兀。如需保留完整动画效果，可：
- 设置
overflow: visible在父级 - 或在外层再包裹一层容器，将动画限制在内容层
基本上就这些。合理利用 transform 动画和 Flex 对齐控制，能显著提升图片缩放的流畅体验。关键在于避免重排、启用硬件加速，并稳定布局结构。
