È possibile impostare durata/ritardo diversi per le opzioni di trasformazione?

Question

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

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; 

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

Answer 1

Probabilmente non direttamente, ma lo stesso effetto può essere ottenuto con nesting elements.

Answer 2

Sì, è possibile farlo direttamente con le animazioni CSS3. Se hai una trasformazione di opacità da 0 a 1 che dura 20 secondi e una rotazione di 90 gradi che dura 10 secondi, crei 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. È una specie di dolore, ma funzionerà. Nidificazione div è un po 'più pulito (come dice Doug 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 si sarebbe messo

-webkit-animation-duration: 20s; 

nel codice HTML.

Answer 3

Sarebbe un problema farlo come ha detto Doug se si dispone di una prospettiva 3D nella propria animazione. Probabilmente potresti usare "transform-style: preserve-3d" ma non funziona in IE 10-11 e funziona in modo strano in tutti gli altri browser tranne Firefox. Quindi l'unica soluzione che penso è usare 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ì puoi impostare la durata più lunga delle tue trasformazioni. Ad esempio 20 secondi per la rotazione: animation-duration: 20s; animation-name: rotate_scale; -webkit-animation-duration: 20s; -webkit-animation-name: rotate_scale; E quindi basta calcolare quando inizierà l'altra trasformazione. Nella scala dell'esame inizia in dieci secondi dopo la rotazione. Quindi sarebbe a metà del tempo pieno (50%). E durerebbe 10 secondi quindi fino alla fine del tempo pieno (100%). Ad esempio, se desideri aumentare la durata della scala di 5 secondi, devi aggiungere il nuovo fotogramma chiave 75% { transform: rotate(135deg) scale(2); } e scrivere lì due trasformazioni.