Estoy experimentando con animaciones de WebKits.Tener un elemento con 2 animaciones CSS ejecutándose al mismo tiempo
¿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;
}
Además, funciona '-webkit-animation: FADE 5s, TRICKY 2.5s'. Juro que probé esto hace mucho tiempo. O lo estropeé o no fue compatible cuando lo intenté :) http://jsfiddle.net/ALBDe/ –
Coma-separando las animaciones trabajadas para mí. ¿Es posible asignar una animación a un selector css y otra animación a otro selector y luego combinar esas clases en un elemento, como
? No funciona para mí en Chrome 22 beta, pero tal vez estoy haciendo algo mal. – jaketrentMe gustaría presentar no debería lograrlos, se sobrescribirá el atributo '-webkit-animation-name' –