Cita:
Iniciado por Bonez 
No sé si todos, pero la mayoría de navegadores requieren aún prefijos propietarios para transformaciones de CSS. Es decir, tienes que especificarlos dentro de @keyframes también.
Código CSS:
Ver original@-webkit-keyframes moveFromTop {
from {
transform: translateY(-50px);
}
to {
transform: translateY(0);
}
}
En el ejemplo quité el símbolo % porque no hace falta representar la unidades de medida cuando el valor es cero, porque cero es cero en cualquier unidades. De todas formas, si usas una medida en un lado, intenta siempre que puedas usar la misma en el otro.
Para que funcione bien también deberías de poner el enlace como elemento de bloque.
Lo que escapa a mi comprensión, es que no funciona si se especifica el :hover en el enlace, pero sí en la lista.
http://jsbin.com/abazuq (sólo para Chrome/Safari)
Gracias por tu ayuda!
Pero tengo más dudas....
He conseguido que el código me funcione tanto en chrome como en firefox....pero por qué este código
Código CSS:
Ver original@-webkit-keyframes mueveDerecha{from{left: 0px;}to{left:50px;}}
@-moz-keyframes mueveDerecha{from{left: 0px;}to{left:50px;}}
@-webkit-keyframes mueveArriba{from{top: -20px;}to{top:0px;}}
@-moz-keyframes mueveArriba{from{top: -20px;}to{top:0px;}}
Si modifico las propiedades left y top por traslateX y traslateY no funciona....¿a qué es debido?