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>

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

2 个答案: