css动画元素位置与尺寸变化
使用transform实现位置与尺寸动画更高效，推荐translate()和scale()避免重排，结合二者可创建流畅动效。
在CSS动画中，元素的位置与尺寸变化是常见的视觉效果需求。通过transform、position、width、height等属性，可以实现平滑且高性能的动画效果。
位置变化：移动元素
要让元素在页面中移动，推荐使用 transform: translate()，它比修改 left、top 等定位属性更高效，因为不会触发重排（reflow）。
示例：将一个元素向右下移动200px
@keyframes move {0% { transform: translate(0, 0); }
100% { transform: translate(200px, 200px); }
}
.animated-box {
width: 100px;
height: 100px;
background: blue;
animation: move 2s ease-in-out;
}
如果使用 position: relative 配合 left/top，也能实现位移，但性能略低：
0% { left: 0; top: 0; }
100% { left: 200px; top: 200px; }
}
.animated-box {
position: relative;
animation: moveByPosition 2s;}
尺寸变化：缩放或调整宽高
改变元素尺寸有两种主要方式：修改 width 和 height，或使用 transform: scale()。
scale() 更适合做视觉缩放动画，因为它基于变换，不破坏文档流。
@keyframes grow {0% { transform: scale(1); }
100% { transform: scale(1.5); }
}
若需精确控制实际宽高（如从50px到200px），则直接修改尺寸属性：
@keyframes resize {0% { width: 50px; height: 50px; }
100% { width: 200px; height: 200px; }
}
注意：频繁修改宽高可能引发重排和重绘，建议对非关键路径元素使用。
结合位置与尺寸动画
你可以同时改变位置和尺寸，创建更丰富的动效。
@keyframes moveAndGrow {0% {
transform: translate(0, 0) scale(1);
}
100% {
transform: translate(100px, 100px) scale(2);
}
}
这样元素会一边移动一边放大，动画流畅且性能良好。
基本上就这些。合理使用 transform 能避免布局抖动，提升动画表现力。关键在于选择合适的属性组合，兼顾效果与性能。
