javascript - 从右到左增加或增加 div 标签宽度

Question

所以基本上需要做的是，在时间 0，宽度为 0，时间 1，宽度应该逐渐增加，从右到左我猜最难的部分是从“右到左”动画它，我没有问题动画一些从左到右增加大小的东西，如下所示

 @-webkit-keyframes reducetime {
 0% {width: 100%;}
 25% {width: 75%;}
 50% {width: 50%;}
 75% {width: 25%;}
  to {width: 0%;}
}

我更喜欢解决方案不需要额外的插件，但如果没有其他方法，请随时提供这样的解决方案。谢谢

Answer 1

您可以使用float:right将容器放在右侧：

#abc {
  width: 100%;
  height: 100px;
  background-color: pink;
  animation-name: reducetime;
  animation-duration: 1s;
  float: right;
}

@keyframes reducetime {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

<div id="abc"></div>

Answer 2

宽度不是从左侧或右侧动画，它只是从 div 的左边缘定位的 div 的内容。

只需相对于右边缘定位内容，使其从左侧隐藏。根据您在 div 中的内容，您可能需要在其中使用另一个容器 (div)，您可以使用position: absolute; right: 0.