css动画位移制作
CSS动画位移的实现方法
使用transform属性的translate函数实现位移效果。translate支持X轴、Y轴或二维移动，不会影响页面布局。
.element {
transform: translateX(100px); /* 水平移动 */
transform: translateY(50px); /* 垂直移动 */
transform: translate(100px, 50px); /* 同时控制XY轴 */
}关键帧动画制作位移
通过@keyframes定义位移过程，结合animation属性应用动画。可精确控制位移路径和时序。
@keyframes move {
0% { transform: translateX(0); }
50% { transform: translateX(200px); }
100% { transform: translateX(0); }
}
.box {
animation: move 3s ease-in-out infinite;
}transition实现平滑过渡
对元素状态变化添加过渡效果，适合交互触发的位移。需定义起始和结束状态。
.button {
transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.button:hover {
transform: translateY(-5px);
}3D空间位移
使用translate3d或translateZ开启硬件加速，提升性能。适合复杂动画场景。
.card {
transform: translate3d(0, 0, 0);
transition: transform 0.5s;
}
.card:hover {
transform: translate3d(10px, 10px, 20px);
}路径动画（CSS Motion Path）
通过offset-path定义运动轨迹，实现曲线位移。需注意浏览器兼容性。
.plane {
offset-path: path('M20,20 C100,50 180,0 280,50');
animation: fly 3s linear infinite;
}
@keyframes fly {
100% { offset-distance: 100%; }
}性能优化建议
优先使用transform而非top/left等属性触发位移，避免重排。使用will-change: transform提前告知浏览器元素将发生变化。简化关键帧数量，减少计算量。
