对象不会像我想要的那样从屏幕的一侧移动到另一侧

Question

所以我试图在 css 关键帧的帮助下将一个对象从屏幕左侧移动到右侧，所以我这样做了：

0%{转换：translateX(0%);} 100%{transform: translateX(100%);}

但是 100% 的东西不起作用，它只是像屏幕的 1/8 一样向一侧移动，而不是完全向右侧移动。

希望有人能帮忙，先谢谢了

Answer 1

transform: translate() 将元素转换为相对于它之前的位置，而不是它的父元素。要相对于视口移动，请使用vw 单位：

body {
  margin: 0;
  padding: 0;
}

div {
  height: 5em;
  width: 5em;
  background: red;
  animation: animation 1s infinite;
}

@keyframes animation {
  0% {
    transform: translateX(0vw);
  }
  100% {
    transform: translateX(calc(100vw - 5em));
  }
}

<div></div>