¿Es posible establecer diferentes duraciones / retardo para transformar las opciones?

Question

Quiero configurar varias opciones para transformar mi objeto HTML pero con diferente duración y retardo.

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;

A continuación, voy a tener diferente función de tiempo para transformar y opacidad, pero puedo configurar diferentes opciones de rotación y escala, por ejemplo, rotación de 10s y 20s escala?

Answer 1

Probablemente no directamente, pero el mismo efecto se puede lograr por elementos de agrupamiento .

Answer 2

Si usted puede hacer esto directamente con animaciones CSS3. Si usted tiene una opacidad transformar de 0 a 1 que dura 20 segundos, y una rotación de 90 grados que dura 10 segundos, a continuación, crear un fotograma clave en 10 segundos con la opacidad y la rotación de 0,5 grados 90 y otro fotograma clave en 20 segundos con la opacidad 1 y la rotación de 90 grados. Es una especie de dolor, pero funcionará. Anidación divs es un poco más limpio (como dice Doug arriba)

La autorización 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 el código HTML.

Answer 3

Ese problema sería la de hacerlo como Doug dijo que si usted tiene la perspectiva 3d de la animación. Probablemente se podría utilizar "transformar al estilo: preserve-3d", pero no funciona en IE 10-11 y trabaja raro en todos los demás navegadores, excepto con Firefox. Por lo que la única solución que creo que es el uso de 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);
     }
}

Así se puede 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 calcular cuando su otra transformada comenzará. En la escala examle comienza en segundos diez después de la rotación. Por lo que sería la mitad de tiempo completo (50%). Y sería una duración de 10 segundos, por lo que hasta el final de jornada completa (100%). Pero si desea hacer escala duración de 5 segundos, por ejemplo, que había necesidad de añadir nuevos 75% { transform: rotate(135deg) scale(2); } fotograma clave y escribir allí dos se transforma.