从右到左增加或增加 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

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

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

Answer 2

您可以使用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>