Ist es möglich, verschiedene Dauer/Verzögerung für Transformationsoptionen einzustellen?

Ich möchte mehrere Transform Optionen für mein HTML-Objekt, aber mit unterschiedlicher Dauer und Verzögerung.Ist es möglich, verschiedene Dauer/Verzögerung für Transformationsoptionen einzustellen?

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 Transformation und Opazität aber kann ich verschiedene Optionen für die Rotations- und Maßstäbe, z.B. für 10s drehen und 20s skalieren?

Quelle

2010-09-02 Ilya Tsuryev

Wahrscheinlich nicht direkt, aber der gleiche Effekt kann durch nesting elements erreicht werden.

Quelle

2010-09-02 18:17:50 Doug

Ja, das sollte möglich sein, aber definitiv härter als ich dachte. Vielen Dank! –

Ja, Sie können dies direkt mit CSS3-Animationen tun. Wenn Sie eine 20-Sekunden-Opazitätstransformation von 0 nach 1 und eine 10-sekündige 90-Grad-Drehung haben, erstellen Sie ein Keyframe nach 10 Sekunden mit einer Deckkraft von .5 und einer Drehung von 90 Grad und einem weiteren Keyframe mit einer Opazität von 20 Sekunden und Drehung um 90 Grad. Es ist eine Art von Schmerz, aber es wird funktionieren. Nesting divs ist etwas sauberer (als Doug oben sagt)

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 würden Sie

-webkit-animation-duration: 20s;

in Ihren HTML setzen.

Quelle

2010-09-09 18:29:04

Es tut mir leid, dass ich es nicht ganz verstanden habe. Die Opazität (oder eine andere 'normale' Eigenschaft) und das Webtransformations-Timing könnten wie folgt eingestellt werden: -Webkit-Übergang: -Webkit-Transformation, Opazität; -webkit-Übergangsdauer: 2000 ms, 6000 ms; Aber wie in Ihrem Beispiel Timing für eine andere Webtransformation hinzufügen - skalieren Sie in meinem Fall (wenn Webtransform wie definiert ist: -webkit-transform: rotieren (180deg) Maßstab (2);). Vielen Dank! –

Bearbeitet den Code - Ich schlage vor, die Verwendung von Animationen nicht Übergänge –

Leider fällt dies auseinander, wenn Sie Timing-Funktionen angeben und Sie möchten die Animation über Keyframes reibungslos. Es ist 2015, gibt es schon eine bessere Antwort? – ericsoco

Das wäre ein Problem zu tun, wie Doug sagte, wenn Sie 3D-Perspektive in Ihrer Animation haben. Wahrscheinlich könnten Sie "transform-style: preserve-3d" verwenden, aber es funktioniert nicht in IE 10-11 und funktioniert in allen anderen Browsern außer Firefox seltsam. Die einzige Lösung, die ich denke, ist die Verwendung von CSS3-Animationen. 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 Transformationen festlegen. Zum Beispiel 20 Sekunden für die Rotation: animation-duration: 20s; animation-name: rotate_scale; -webkit-animation-duration: 20s; -webkit-animation-name: rotate_scale; Und dann einfach berechnen, wenn Ihre andere Transformation beginnt. In der Beispielskala beginnt in zehn Sekunden nach der Rotation. Es wäre also eine halbe Vollzeit (50%). Und es würde bis zum Ende der Vollzeit (100%) 10 Sekunden dauern. Aber wenn Sie beispielsweise eine Skalierungsdauer von 5 Sekunden benötigen, müssen Sie einen neuen Keyframe 75% { transform: rotate(135deg) scale(2); } hinzufügen und dort zwei Transformationen schreiben.

Quelle

2014-04-30 08:15:48 user2846477

Ist es möglich, verschiedene Dauer/Verzögerung für Transformationsoptionen einzustellen?

Antwort

Verwandte Themen