¿Es posible establecer diferentes duración/retraso para las opciones de transformación?

Question

Quiero establecer varias opciones de transformación para mi objeto html pero con diferente duración y demora.

Si intento utilizar algo así:

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

entonces tendré diferente función de tiempo para transformar y opacidad, pero puedo configurar diferentes opciones para la rotación y escala, por ejemplo, rotar por 10s y escalar 20s?

Answer 1

Probablemente no directamente, pero se puede lograr el mismo efecto en nesting elements.

Answer 2

Sí, puedes hacerlo directamente con animaciones CSS3. Si tiene una transformación de opacidad de 0 a 1 que dura 20 segundos y una rotación de 90 grados que dura 10 segundos, entonces crea un fotograma clave a 10 segundos con opacidad .5 y rotación 90 grados y otro fotograma clave a 20 segundos con opacidad 1 y rotación 90 grados. Es una especie de dolor, pero funcionará. Anidación divs es un poco más limpio (como dice Doug arriba)

Ok aquí está el código:

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

Y que había puesto

-webkit-animation-duration: 20s; 

en tu HTML.

Answer 3

Eso sería un problema hacerlo como Doug dijo si tienes perspectiva 3D en tu animación. Probablemente podría usar "transform-style: preserve-3d", pero no funciona en IE 10-11 y funciona de manera extraña en todos los demás navegadores excepto en Firefox. Entonces, la única solución que creo es usar animaciones CSS3. En su caso sería:

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

Para que pueda establecer la duración más larga de sus transformaciones. Por ejemplo, 20 segundos para la rotación: animation-duration: 20s; animation-name: rotate_scale; -webkit-animation-duration: 20s; -webkit-animation-name: rotate_scale; Y luego simplemente calcule cuándo comenzará su otra transformación. En la escala de examen comienza en diez segundos después de la rotación. Entonces sería la mitad del tiempo completo (50%). Y duraría 10 segundos hasta el final del tiempo completo (100%). Pero si desea hacer una duración de escala de 5 segundos, por ejemplo, deberá agregar un nuevo fotograma clave 75% { transform: rotate(135deg) scale(2); } y escribir allí dos transformaciones.