小编Ale*_*sio的帖子

我想写一个通用的css动画来左右移动一个div,触摸容器的边缘......以一种简单的方式应用于任何除了具有绝对定位之外我什么都不知道的div.

问题是简单地将左边放在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 
}