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

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

前端

我想用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动画

我来解答赞 2 收藏

反馈

1 条解答

小艺童 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