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 に答える