使用CSS transform: scale() 结合 animation 可实现元素平滑缩放。通过 @keyframes 定义动画关键帧，如 zoomIn 从 scale(0.8) 到 scale(1)，配合 ease-out 缓动提升视觉体验。优先使用 transform 而非 width/height 修改，利用GPU加速；添加 will-change: transform 提升性能，避免布局抖动。通过 class 切换控制动画状态，合理设置 animation-delay 与 iteration-count 实现高效流畅的缩放效果。
在网页开发中，让元素平滑缩放是提升用户体验的常用手段。使用CSS animation 结合 transform: scale() 可以轻松实现流畅的大小变化效果，无需JavaScript干预。
使用 transform: scale 实现缩放
scale() 函数用于在X轴和Y轴上缩放元素。值大于1表示放大，小于1表示缩小。例如：
- scale(1)：原始大小
- scale(1.2)：放大1.2倍
- scale(0.8)：缩小到80%
通过改变 scale 值并配合 transition 或 animation，可实现平滑过渡。
结合 CSS Animation 创建缩放动画
定义关键帧（@keyframes）控制 scale 的变化过程，使动画更灵活。
立即学习“前端免费学习笔记（深入）”；
@keyframes zoomIn {
from {
transform: scale(0.8);
}
to {
transform: scale(1);
}
}
.animated-element {
animation: zoomIn 0.3s ease-out forwards;
}
上面代码实现了元素从0.8倍放大至原始大小，使用 ease-out 缓动函数让动画结尾更自然。
优化动画性能与视觉体验
为确保缩放动画流畅且不引起布局抖动，注意以下几点：
- 优先使用 transform 而不是修改 width/height，因为 transform 由GPU加速，性能更好
- 添加 will-change: transform 可提示浏览器提前优化图层
- 避免在频繁触发的场景中反复添加/移除动画类，可通过切换 class 控制状态
- 若需循环动画，设置合适的 animation-delay 和 animation-iteration-count
基本上就这些。合理运用 CSS 的 transform 和 animation，就能让元素缩放既顺滑又高效。
