CSS动画方向问题

Posted 2023-03-07

【中文标题】CSS动画方向问题

【英文标题】：CSS Animation Directional Issue

【发布时间】：2019-05-31 21:12:26

【问题描述】：

我们正在尝试按如下方式为 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 和浮动、定位等做什么，第二部分都会从右向左收缩。即左侧始终是锚点，而我们希望在发生收缩时右侧成为锚点。

不胜感激。

【参考方案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>