が設定できるようにするの異なる時間の遅延のための変換オプション?

Question

たい設定複数の変換オプションのための私のhtmlオブジェクトが異なる時間をかけることも可能。

場合は写真撮影のポイントにご案内している:

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

そういう異なる時間の機能の変換および不透明度が設定できまざまなオプションのために回転し、規模など回転のための10の規模は20代の?

Answer 1

そらく直接的なものと同様の効果が達成できるよ ネスト要素.

Answer 2

はい、CSS3アニメーションと直接これを行うことができます。あなたは不透明度が20秒、10秒続く90度の回転を継続する0から1に変換した場合は、不透明度が1と20秒で不透明度0.5と回転90度、別のキーフレームで10秒でキーフレームを作成します回転90度。これは、痛みの一種だが、それは動作します。ネスティングのdivビットクリーナー（ダグは、上記の言うように）

であります

は[OK]を、ここでコードです

@-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に

Answer 3

それはあなたがあなたのアニメーションで、3D視点を持っている場合はダグが言ったようにそれを行うには問題だろう。おそらくあなたは、「トランスフォームスタイル：保存-3D」を使用できますが、それはIE 10-11で仕事をしないとFirefox exept他のすべてのブラウザで変な動作します。だから私が思う唯一の解決策は、CSS3アニメーションを使用することです。あなたのケースでは、それは次のようになります：

@-webkit-keyframes rotate_scale {

    0% {
        -webkit-transform: rotate(0deg) scale(0);
     }
     50% {
        -webkit-transform: rotate(90deg) scale(0);
     }
     100% {
        -webkit-transform: rotate(180deg) scale(2);
     }
}
@keyframes rotate_scale {

    0% {
        transform: rotate(0deg) scale(0);
     }
     50% {
        transform: rotate(90deg) scale(0);
     }
     100% {
        transform: rotate(180deg) scale(2);
     }
}

つまり、あなたの変換の最長期間を設定することができます。回転のための20秒は、たとえば：animation-duration: 20s; animation-name: rotate_scale; -webkit-animation-duration: 20s; -webkit-animation-name: rotate_scale;そして、ちょうど計算あなたの別の変換を開始します。 examle規模で回転した後、10秒以内に開始されます。だから、フルタイム（50％）の半分になります。そして、それはそうフルタイム（100％）の終わりまで10秒続くでしょう。しかし、あなたは、あなたが新しいキーフレーム75% { transform: rotate(135deg) scale(2); }と書き込みがある[ 2 の変換を追加する必要があると思います例えば、スケール期間5秒をしたいと思います。