使用css通过left和top实现动画需结合position与transition或@keyframes。1. 设置position后，用transition定义left、top的过渡效果，可实现hover时的平滑移动；2. 使用@keyframes定义动画关键帧，控制元素在不同时间点的left和top值，实现自动循环移动；3. 注意left/top触发重排影响性能，建议优先使用transform: translate替代，若使用left/top应置于absolute定位容器中以减少布局影响。
使用CSS实现元素通过 left 和 top 属性进行动画移动，需要结合 position 定位和 transition 或 @keyframes 动画。以下是具体实现方法。
1. 使用 transition 配合 left/top 实现平滑移动
给元素设置定位后，通过改变 left 和 top 值，并添加 transition 过渡效果，可实现鼠标悬停或状态变化时的动画移动。
示例代码：.box {
position: relative;
width: 100px;
height: 100px;
background: red;
left: 0;
top: 0;
transition: left 0.5s ease, top 0.5s ease;
}
.box:hover {
left: 100px;
top: 50px;
}
说明：元素初始在左上角，鼠标移入时向右下平滑移动。必须设置 position: relative、absolute 或 fixed，否则 left/top 不生效。
2. 使用 @keyframes 动画控制 left/top 自动移动
通过关键帧动画定义元素在不同时间点的 left 和 top 位置，实现自动移动效果。
示例代码：.box {
position: absolute;
width: 50px;
height: 50px;
background: blue;
left: 0;
top: 0;
animation: moveSquare 3s infinite alternate;
}
@keyframes moveSquare {
0% {
left: 0;
top: 0;
}
100% {
left: 200px;
top: 100px;
}
}
说明：元素在 3 秒内从左上角移动到指定位置，并无限循环往返。animation 控制动画时长、次数和方向。
3. 注意事项与优化建议
- 确保元素设置了 position（relative、absolute、fixed），否则 left/top 不起作用。
- 频繁修改 left/top 会触发重排（reflow），影响性能。如需高性能动画，推荐使用 transform: translate(x, y) 替代。
- 若必须用 left/top，可将元素放在 position: absolute 的容器中，减少对其他布局的影响。
- transition 只适用于状态变化（如 hover、class 切换），而 @keyframes 适合自动播放的复杂动画。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
