3

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

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

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

4

2 回答 2

5

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

于 2012-04-18T17:12:21.030 回答
4

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

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

于 2012-04-18T17:10:16.870 回答