Ist es möglich, unterschiedliche Dauer / Verzögerung, um Optionen für die Transformation?

Question

Ich mag mehr Optionen einstellen Transformation für mein HTML-Objekt, aber mit unterschiedlicher Dauer und Verzögerung.

Wenn ich versuche, so etwas zu verwenden:

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

Dann werde ich verschiedene Zeitfunktion für und Opazität verwandeln, aber kann ich verschiedene Optionen für die Rotations- und Maßstäbe, z.B. Drehen für 10s und 20s Maßstab?

Answer 1

Wahrscheinlich nicht direkt, aber die gleiche Wirkung kann durch Verschachtelung Elemente .

Answer 2

Ja, Sie können dies mit CSS3-Animationen direkt tun. Wenn Sie eine Opazität von 0 bis 1 haben, die Transformation 20 Sekunden und eine 90-Grad-Drehung dauert 10 Sekunden dauert, dann erstellen Sie ein Keyframe bei 10 Sekunden mit Opazität .5 und Rotation um 90 ° und ein anderes Schlüsselbild in 20 Sekunden mit 1 Opazität und die Drehung um 90 °. Es ist eine Art von Schmerz, aber es wird funktionieren. Nesting divs ist etwas sauberer (als Doug sagt oben)

Ok hier ist der Code:

@-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;
 }

Und du würdest setzen

-webkit-animation-duration: 20s;

in Ihre HTML.

Answer 3

Das wäre Problem es wie Doug zu tun hat gesagt, wenn Sie 3D-Perspektive in Ihrer Animation haben. Wahrscheinlich könnten Sie „Transform-Stil: preserve-3d“ verwenden, aber es funktioniert nicht in IE 10-11 und arbeitet seltsam in allen anderen Browsern außer Firefox. So ist die einzige Lösung, die ich denke, ist CSS3-Animationen zu verwenden. In Ihrem Fall wäre es:

@-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);
     }
}

So können Sie die längste Dauer Ihrer Transformation einstellen. Zum Beispiel 20 Sekunden für Rotation: animation-duration: 20s; animation-name: rotate_scale; -webkit-animation-duration: 20s; -webkit-animation-name: rotate_scale; Und dann berechnen nur, wenn Sie eine andere beginnt zu verwandeln. Im examle Skala beginnt in 10 Sekunden nach der Drehung. So wäre es eine Hälfte in Vollzeit (50%) sein. Und es wäre 10 Sekunden so bis zum Ende der Vollzeit (100%) dauern. Aber wenn Sie möchten, dass maßstabs Dauer 5 Sekunden zum Beispiel machen Sie bräuchten neue Keyframe 75% { transform: rotate(135deg) scale(2); } und Schreib hinzuzufügen es zwei Transformationen.