15

HTML オブジェクトに複数の変換オプションを設定したいのですが、期間と遅延が異なります。

そのようなものを使用しようとすると:

-webkit-transition: -webkit-transform, opacity;
-webkit-transform: rotate(180deg) scale(2); 
-webkit-transition-duration: 2000ms, 6000ms; 
-webkit-transition-delay: 0ms, 6000ms;

次に、変換と不透明度に異なる時間関数を使用しますが、回転とスケーリングに異なるオプションを設定できますか?たとえば、10 秒間回転し、20 秒間スケーリングしますか?

4

3 に答える 3

13

はい、CSS3アニメーションで直接これを行うことができます。不透明度を0から1に変換して20秒間継続し、90度の回転を10秒間継続する場合は、不透明度0.5で10秒のキーフレームを作成し、不透明度1で90度の回転と20秒の別のキーフレームを作成します。そして90度回転します。それは一種の苦痛ですが、それはうまくいくでしょう。ネストするdivは少しきれいです（ダグが上で言ったように）

コードは次のとおりです。

@-webkit-keyframes foo {
 0% {
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    opacity: 0;
 }
 50% {
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    opacity: 0.5;
 }

 100% {
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(90deg);
    opacity: 1;
 }

そして、あなたは置くだろう

-webkit-animation-duration: 20s;

HTMLに。

于 2010-09-09T18:29:04.790 に答える
7

おそらく直接ではありませんが、要素をネストすることで同じ効果を得ることができます。

于 2010-09-02T18:17:50.263 に答える