html - 左右移动.. css 只是非常通用

Question

我想写一个通用的 css 动画来左右移动一个 div，触及容器的边缘 .. 以一种简单的方式应用于任何我不知道的 div，除了它有一个绝对定位.

问题是简单地将 left 置于 0% 然后置于 100% .. 一会儿消失了，我应该使用类似 calc (100% -width) ..放置一个 50% 的关键帧几乎就像我想要的那样，但是速度变慢了，而且它不是很流畅和线性......有什么建议吗，考虑到我不知道我的 div 有多长，而且我不使用 js/jquery，但只使用 css..？

https://codepen.io/alemarch/pen/vrvgMo

 @keyframes destraSinistra {
  0% {
    left: 0%;
    color: black;
    right: unset;
  }
  50% {
    left:50%;
    right: 50%;
  }

  100% {
    left:unset;
    right: 0px;
    color: green;
  }
}


#div1 {
  position: absolute;
  border: solid 1px lightgray;
  width: 100px;
  top: 200px;
  height: 30px;
  background-color: lightgreen;
  animation-name: destraSinistra;
  animation-duration: 4s; 
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: alternate-reverse 
}

Answer 1

使用 transform 结合 left 或 right 来避免添加任何固定值:

@keyframes destraSinistra {
  0% {
    left: 0;
  }
  100% {
    left: 100%;
    transform:translateX(-100%);
  }
}


#div1 {
  position: absolute;
  border: solid 1px lightgray;
  width: 100px;
  height: 30px;
  background-color: lightgreen;
  animation: destraSinistra 1s linear infinite alternate
}

<div id="div1"></div>