CSS动画定向问题

Question

我们正尝试如下制作div动画：

1-从0延伸到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>

但是，无论我们使用变换原点和浮点数，定位等方法做什么，第二部分都会从右向左收缩。即左侧始终是锚点，而我们希望右侧在收缩时成为锚点。

不胜感激。

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>