Css3 keyframes para distintos estados

renttless · #1 (**permalink**) 18/06/2013, 17:39

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

pzin · #2 (**permalink**) 20/06/2013, 05:31

Bienvenido al foro.

Cita:

Iniciado por renttless

La cuestión es que yo quiero que al cargar la página se ejecute la primera animación [..] hacer hover quiero que se ejecute la segunda animación

A mi me sale tal cual quieres que ocurra. Primero baja, luego al hacer hover se va hacia la derecha, y al quitar el ratón se vuelve a la izquierda.