4

現在、次のコードを使用して x と y の両方を同じ速度で変換しています。

-webkit-transition:all 180ms ease-out;

X 軸を Y 軸よりも遅く変換したいのですが、次のようなものを指定することは可能ですか:

-webkit-transition:translateX 180ms ease-out;
-webkit-transition:translateY 50ms ease-out;

前もって感謝します！

4

3 に答える 3

6

悲しいことですが、これは の異なる部分に異なるタイミングを使用することはできませんtransform。これは、現在は 1 つのプロパティのみであり、スプライスできないためです。

あなたができる唯一のこと：

  • 1 つの軸のみに使用し、別の軸 (または など)translateの位置決めを使用します。そうすることで、異なるタイミングを付けることができます。topleft
  • 2 つのラップされたブロックを使用transformして、それらに異なる を使用できるようにします。より多くのコードが必要になりますが、GPU アクセラレーションが必要な場合に役立ちます。

私たちには他の方法はありません:(

于 2012-01-19T07:40:03.217 に答える
1

よくわかりませんが、試してみてください。

.m01 { -webkit-animation:test_XY 3.5s 1.5s ease both;  }



@-webkit-keyframes test_XY {
0%{ -webkit-transform:translateX(450px)}
70%{ -webkit-transform:translateX(-1px)}
80%{ -webkit-transform:translateX(0)}
95%{ -webkit-transform:translateY(-95px)}
100%{ -webkit-transform:translateY(-90px)}
}
于 2014-05-12T09:23:33.473 に答える
1

理想的ではありませんが、1 つのディメンションを変換して、別のプロパティなどを変更することができますleft...

-webkit-transition: left 180ms ease-out, -webkit-transform 50ms ease-out;

デモhttp://jsfiddle.net/DFLL7/

于 2012-01-19T14:13:36.710 に答える