css - 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>

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

将不胜感激任何帮助。

标签： csscss-animations

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>