Hola que tal, esta es mi primera pregunta en este foro porque tengo un problema que me está volviendo loco.
La cuestión es que yo quiero que al cargar la página se ejecute la primera animación (cosa que hace),pero, al hacer hover quiero que se ejecute la segunda animación (desde la posición donde quedo la primera), pero como pueden ver, al hacer hover el cuadro azul se devuelve a su posición inicial y aquí si se ejecuta la segunda animación
Aquí está el código funcionando http://jsfiddle.net/Kd6PX/
Gracias por su mano de ayuda!
acá el código bastante simple:
Código:
<body>
<div id="wrapper">
<div id="animation-wrapper">
</div>
</div>
</body>
Y el css:
Código:
#wrapper{
margin: auto;
width: 960px;
height: 500px;
background-color: black;
}
#wrapper #animation-wrapper{
width: 50px;
height: 50px;
background-color: blue;
position: relative;
-webkit-animation-name:move;
-webkit-animation-duration:4s;
/*-webkit-animation-direction:alternate;*/
/*-webkit-animation-iteration-count:infinite;*/
/*-webkit-animation-delay:2s;*/
-webkit-animation-fill-mode:forwards;
-moz-animation-name:move;
-moz-animation-duration:4s;
-moz-animation-fill-mode:forwards;
}
#animation-wrapper{
-webkit-transition-duration:1s;
-moz-transition-duration:1s;
}
#wrapper #animation-wrapper:hover{
/*-webkit-transition:2s all;*/
/*top: 100px;*/
/*-webkit-transform:translateX(100px);
-moz-transform:translateX(100px);*/
-webkit-animation:left 2s;
-moz-animation:left 2s;
}
@-webkit-keyframes move{
from { top: 0px; }
to { top: 100px; }
}
@-webkit-keyframes left{
from { left: 0px;/*-webkit-transition-duration:0s;*/ }
to { left: 100px; }
}
@-moz-keyframes move{
from { top: 0px; }
to { top: 100px; }
}
@-moz-keyframes left{
from { left: 0px;}
to { left: 100px; }
}