E 'possibile impostare diversa durata / delay per le opzioni di trasformare?

Question

Voglio impostare diverse opzioni di trasformare per il mio oggetto html ma con diversa durata e ritardo.

Se provo ad usare qualcosa di simile:

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

Poi avrò funzione di tempo diverso per trasformare e l'opacità, ma è possibile impostare diverse opzioni per la rotazione e la scala, per esempio ruotare per 10s e 20s scala?

Answer 1

Probabilmente non direttamente, ma lo stesso effetto può essere ottenuto da elementi di raggruppamento .

Answer 2

Sì, è possibile farlo direttamente con le animazioni CSS3. Se si dispone di un'opacità trasformarsi da 0 a 1 che dura 20 secondi, e una rotazione di 90 gradi che dura 10 secondi, quindi si crea un fotogramma chiave a 10 secondi con opacità .5 e rotazione di 90 gradi e un altro fotogramma chiave a 20 secondi con opacità 1 e rotazione di 90 gradi. E 'una sorta di un dolore, ma funzionerà. Nidificazione div è un po 'più pulito (come Doug dice sopra)

Ok ecco il codice:

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

E che ci si mette

-webkit-animation-duration: 20s;

nel codice HTML.

Answer 3

Quello sarebbe problema a farlo come Doug ha detto che se si dispone di 3d prospettiva nella vostra animazione. Probabilmente si potrebbe usare "trasformare-style: preserve-3d", ma non funziona in IE 10-11 e lavora strano in tutti gli altri browser exept Firefox. Quindi l'unica soluzione penso che è quello di utilizzare le animazioni CSS3. Nel tuo caso sarebbe:

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

Così si può impostare la durata più lunga dei vostri trasforma. Per esempio 20 secondi per la rotazione: animation-duration: 20s; animation-name: rotate_scale; -webkit-animation-duration: 20s; -webkit-animation-name: rotate_scale; e poi basta calcolare quando il vostro un altro file di trasformazione avrà inizio. Nella scala examle inizia in pochi secondi dieci dopo la rotazione. Quindi sarebbe una metà del tempo pieno (50%). E sarebbe durato 10 secondi, in modo fino alla fine del tempo pieno (100%). Ma se si desidera rendere durata scala 5 secondi per esempio avresti bisogno di aggiungere nuovi 75% { transform: rotate(135deg) scale(2); } fotogramma chiave e scrittura là due trasforma.