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>

Но независимо от того, что мы делаем, используя transform-origin и float, позиционирование и т. Д., Вторая часть сжимается справа налево. то есть левая сторона всегда является якорем, тогда как мы хотим, чтобы правая сторона была якорем, когда происходит сжатие.

Буду признателен за любую помощь.

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>