css动画元素平滑移动到目标位置

使用CSS transform和transition可实现元素平滑移动，通过添加类名触发动画；也可用@keyframes定义自动播放的动画；JavaScript动态设置transform则适用于运行时计算位置，三者均不触发重排，性能优异。

让一个元素平滑移动到目标位置，可以通过CSS的 transform 和 transition 属性实现。这种方式性能好、动画流畅，是现代前端开发中的推荐做法。

使用 transition + transform 实现平滑移动

给元素添加 transition 属性，配合 transform: translate() 来触发动画。

HTML:
<div class="box"></div>

CSS:
.box {
  width: 50px;
  height: 50px;
  background: blue;
  transition: transform 0.5s ease;
}

.box.move {
  transform: translate(100px, 50px);
}

当给这个 div 添加 move 类时，它会以平滑动画方式移动到相对原位置 x轴100px、y轴50px 的地方。

使用 @keyframes 实现预设动画

如果希望动画自动播放或更复杂控制，可以用 @keyframes 定义关键帧动画。

立即学习“前端免费学习笔记（深入）”；

萌动AI

CreateAI旗下AI动漫视频生成平台

438

查看详情

@keyframes slideTo {
  to {
    transform: translate(100px, 50px);
  }
}

.box {
  width: 50px;
  height: 50px;
  background: green;
  animation: slideTo 0.6s ease forwards;
}

这个元素会在页面加载后自动平滑移动到目标位置，forwards 确保动画结束后保持最终状态。

JavaScript 控制动态位置

若目标位置由用户交互或计算得出，可用 JavaScript 动态设置 transform。

const box = document.querySelector('.box');
box.style.transition = 'transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)';
box.style.transform = 'translate(200px, 100px)';

这样可以在运行时灵活控制移动目标，同时保持动画平滑。

基本上就这些。用 transform 移动元素不会触发重排，只涉及合成层操作，性能更好。搭配 transition 或 animation，轻松实现自然流畅的移动效果。

以上就是css动画元素平滑移动到目标位置的详细内容，更多请关注php中文网其它相关文章！