CSS动画怎么让元素从左往右平滑移动？

上官栾同提问于 2026-03-06 04:02:17 阅读 90

前端

我想用CSS动画让一个div从页面左边移到右边，但试了几次都不对。用了transform: translateX()配合@keyframes，可元素要么不动，要么直接跳到终点，根本没有过渡效果。

这是我的代码：

@keyframes moveRight {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}
.box {
  width: 50px;
  height: 50px;
  background: red;
  animation: moveRight 2s;
}

是不是100%的参考值有问题？还是我漏了什么属性？

CSS动画

我来解答赞 14 收藏

反馈

2 条解答

Good“继芳 Lv1

你的代码语法没问题，问题是 translateX(100%) 的参照对象理解错了。

translateX(100%) 的100%是相对于元素自身宽度的，不是父容器。所以你那个50px的盒子只会往右移50px，而不是移到右边。

想让元素移到右边，有几个方案：

方案一：用 left 属性（最简单）

@keyframes moveRight {

  from { left: 0; }

  to { left: calc(100% - 50px); }

}

.box {

  width: 50px;

  height: 50px;

  background: red;

  position: relative;

  animation: moveRight 2s;

}

方案二：保持用 transform，但用 vw 单位

@keyframes moveRight {

  from { transform: translateX(0); }

  to { transform: translateX(calc(100vw - 50px)); }

}

.box {

  width: 50px;

  height: 50px;

  background: red;

  animation: moveRight 2s;

}

方案三：用 left + transform 组合

@keyframes moveRight {

  from { left: 0; }

  to { left: 0; transform: translateX(calc(100vw - 50px)); }

}

如果你的需求是相对于父容器移动，而不是整个屏幕，那把 100vw 换成 100% 就行了。

还有一点提醒：如果你看到元素"直接跳到终点"，检查一下是不是把 animation-fill-mode 漏掉了，默认情况下动画结束后元素会回到初始位置。

2026-03-11 08:06

小艺童 Lv1

你的代码基本没问题，主要缺了animation-timing-function来控制运动曲线。默认是ease但有时候浏览器表现不一致，手动加上linear会更可靠。另外百分比单位确实可能有问题，建议换成具体像素值或者vw单位。

试试这样改：

@keyframes moveRight {

  from { transform: translateX(0); }

  to { transform: translateX(100vw); }

}

.box {

  width: 50px;

  height: 50px;

  background: red;

  animation: moveRight 2s linear;

  position: relative; /* 保险起见加上这个 */

}

安全提示：用vw单位时要考虑移动端兼容性，有些老设备可能不支持。如果是关键动画效果，最好加个fallback方案，比如用媒体查询降级成固定像素值。

调试小技巧：先给动画设个5秒持续时间，慢动作看得更清楚哪里出问题。我经常这么干，毕竟CSS动画调试起来太玄学了。

2026-03-06 04:04