Uso de @keyframes en CSS

[madman_18]

Hola a todos!!

Estoy teniendo problemas con un efecto que quiero, me funciona el efecto en Firefox pero en Opera, Chrome...no hay forma.

Os dejo el código por si sabéis donde se puede estar metiendo la pata....

Código CSS:

#lista-menu .menu-item a:hover {color:#FFD324 !important;
      animation: moveFromTop 300ms ease-in-out;
      -moz-animation:moveFromTop 300ms ease-in-out;
      -webkit-animation: moveFromTop 300ms ease-in-out; }
@keyframes moveFromBottom {
    from {transform: translateX(50px);}
    to {transform: translateX(0%);}
}
@keyframes moveFromTop {
    from {transform: translateY(-50px);}
    to {transform: translateY(0%);}
}
 

Y el HTML está tal que así

Código HTML:

<ul id="lista-menu">
<li class="menu-item">
<a>Mi enlace</a>
</li>
</ul>