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 {
-webkit-transform: translateY(-50px);
}
to {
-webkit-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)