CSS动画方向性问题

Question

我们正在尝试按如下方式为 div 设置动画:

1- 从 0 拉伸(stretch)到 100%(从左到右)

2-然后从100%缩小到0(也是从左到右)

3- 然后重复。

我们有以下 div:

div {
  position: absolute;
  height: 2px;
  background: #c60000;
  left: 0;
  top: 0;
  color: #789;
  width: 0;
  animation-duration: 5s;
  animation-name: progress;
  animation-iteration-count: infinite;
}
    
@keyframes progress {
  50% {
    // transform-origin: right top;
    width: 100%;
  }
}

<div></div>

但是无论我们使用 transform-origin 和 float 、定位等做什么，第二部分都会从右向左收缩。即左侧始终是 anchor ，而我们希望右侧在发生收缩时成为 anchor 。

非常感谢任何帮助。

Answer 1

div {
  position: absolute;
  height: 2px;
  background: #c60000;
  top: 0;
  color: #789;
  animation-duration: 5s;
  animation-name: progress;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
    
@keyframes progress {
  0% {
    left: 0;
    width: 0;
  }
  50% {
    right: 0;    
    width: 100%;
  }
  100% {
    right: 0;      
    width: 0;
  }
}

<div></div>