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>
 

[pzin]

No he mirado más allá de que no usas prefijos propietarios en las reglas de keyframes; -webkit, -moz, -o...

Algo así:

Código CSS:

@-webkit-keyframes {}
 

[madman_18]

Iniciado por Bonez

No he mirado más allá de que no usas prefijos propietarios en las reglas de keyframes; -webkit, -moz, -o...

Algo así:

Código CSS:

@-webkit-keyframes {}
 

Perdón, no lo puse...

Código CSS:

@keyframes moveFromBottom {from {transform: translateX(50px);}to {transform: translateX(0%);}}
@-moz-keyframes moveFromBottom {from {transform: translateX(50px);}to {transform: translateX(0%);}}
@-webkit-keyframes moveFromBottom {from {transform: translateX(50px);}to {transform: translateX(0%);}}
@keyframes moveFromTop {from {transform: translateY(-50px);}to {transform: translateY(0%);}}
@-moz-keyframes moveFromTop {from {transform: translateY(-50px);}to {transform: translateY(0%);}}
@-webkit-keyframes moveFromTop {from {transform: translateY(-50px);}to {transform: translateY(0%);}}
 

Aún añadiendo esto sigue sin funcionar.....en Firefox sí lo hace, pero con el resto no.... :(

[pzin]

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:

@-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)

[madman_18]

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:

@-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:

@-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?

[pzin]

Porque por defecto cualquier elemento CSS tiene posición estática. Y para usar top/right/bottom/left tienes que posicionar el elemento de forma relativa —también vale absoluta o fija, pero no viene al caso (supongo).

[pzin]

Iniciado por Bonez

Lo que escapa a mi comprensión, es que no funciona si se especifica el :hover en el enlace, pero sí en la lista.

Bueno, pensando un poco, supongo que no funciona con a:hover, porque cuando pones el ratón encima del enlace y empieza la animación, termina enseguida ya que el enlace se va hacia arriba y el ratón ya no está encima del enlace. Creo que vaya a ser eso.
Tiene su lógica, aunque normalmente cuando ocurren estas cosas pasan unos parpadeos raros como aquí. Supongo que no ocurrían antes porque el enlace en su estado normal era un elemento en línea.

[madman_18]

Iniciado por Bonez

Bueno, pensando un poco, supongo que no funciona con a:hover, porque cuando pones el ratón encima del enlace y empieza la animación, termina enseguida ya que el enlace se va hacia arriba y el ratón ya no está encima del enlace. Creo que vaya a ser eso.
Tiene su lógica, aunque normalmente cuando ocurren estas cosas pasan unos parpadeos raros como aquí. Supongo que no ocurrían antes porque el enlace en su estado normal era un elemento en línea.

Claro tiene su lógica, pero no entiendo este caso:

- Con posicion relativa: no funcionan los traslateX ni translateY pero sí el top y left (cosa lógica como apuntas).

- Sin posición relativa: no funciona ningún tipo de aspecto, ni el translate ni el left ni top.

Y como estoy aprendiendo a usarlos por eso pregunto jejeje.

[pzin]

Iniciado por madman_18

- Sin posición relativa: no funciona ningún tipo de aspecto, ni el translate ni el left ni top.

Para translate no hace falta una posición relativa. Porque son transformaciones realmente, no estás moviendo el elemento a otra posición sino transformándolo a otra posición.

De hecho, en el primer enlace, funciona translate sin posicionarlo relativamente.