Tener un elemento con 2 animaciones CSS ejecutándose al mismo tiempo

Question

Estoy experimentando con animaciones de WebKits.

¿Es posible que un elemento HTML tenga más de una animación ejecutándose al mismo tiempo?

Por ejemplo:

@-webkit-keyframes FADE 
    { 
     from { 
      opacity: 0; 
     } 
     to { 
      opacity: 1; 
     } 
    } 

    @-webkit-keyframes TRICKY 
    { 
     0% { 
      -webkit-transform: translate(0px,0) rotate(-5deg) skew(-15deg,0); 
     } 
     50% { 
      -webkit-transform: translate(-100px,0) rotate(-15deg) skew(-25deg,0); 
     } 
     75% { 
      -webkit-transform: translate(-200px,0) rotate(-5deg) skew(-15deg,0); 
     } 
     100% { 
      -webkit-transform: translate(0px,0) rotate(0) skew(0,0); 
     } 
    } 

// Can this element have FADE execute for 5 seconds BUT halfway between that animation 
// can I then start the TRICKY animation & make it execute for 2.5 seconds? 
#myEle { 
    -Webkit-animation-name: FADE TRICKY; 
    -Webkit-animation-duration: 5s 2.5s; 
} 

Lo anterior fue un ejemplo muy simple. Tendría muchas bibliotecas de animaciones, como rotar, fundir, etc. Y no quiero tener que escribir una animación especial si quiero que un elemento ejecute 2 animaciones al mismo tiempo.

Es esto posible ...

//Not sure if this is even valid CSS: can I merge 2 animations easily like this? 
@-webkit-keyframes FADETRICKY 
{ 
    FADE TRICKY; 
} 

Answer 1

Vas a tener que combinar manualmente las animaciones, creo.

Si necesita utilizar algo como esto en varios lugares, eche un vistazo a Less CSS o similar, para que pueda usar "mixins" (por ejemplo, funciones) para generar css. Lo uso para abstraer el CSS específico del vendedor para que en el archivo .less principal, 5 o 6 líneas de código específico del navegador puedan ser reemplazadas por un método.

Answer 2

#myEle { 
    -Webkit-animation-name: FADE,TRICKY; 
    -Webkit-animation-duration: 5s,2.5s; 
} 

Use ',' no space. Estaba en la versión de Chrome 16.0.899.0 para probar.