[SOLUCIONADO] ¿Cómo lograr animaciones de ida y vuelta con CSS?

[berkeleyPunk]

Buena noche.

Cuando se hace una animación básica en CSS, digamos cuando la ida se ejecuta cuando el elemento a animar tiene el cursor encima, la animación cuenta con tantos frames como se hayan establecido, mas no la vuelta. Ésta regresa de 100% a 0% de una vez.

La pregunta es: ¿Cómo hacer para que el regreso tenga tantos frames como la ida, o sea, que se realice la misma animación en reversa, u otra, cuando se quita el cursor del elemento animado?


Un ejemplo claro de lo que pretendo está aquí: http://www.fertility.com.mx/es/index.html Está en Flash, pero la idea es la misma.


Hasta ahora, llevo lo siguiente, que es la ida. Falta la vuelta:

Código CSS:

@-webkit-keyframes animation_1
{
    0% {-webkit-transform:translateX(0px);}
    20% {-webkit-transform:translateX(500px);}
    22% {-webkit-transform:translateX(450px);}
    24% {-webkit-transform:translateX(500px);}
    56% {-webkit-transform:translateX(450px);}
    100% {-webkit-transform:translateX(500px);}
}
.caja {
    position:absolute;
    top:0;
    left:-500px;
    width:600px;
    height:100px;
    background-color:red;
}
 
.caja:hover {
    -webkit-animation-name:animation_1;
    -webkit-animation-duration:500ms;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-iteration-count:1;
    -webkit-animation-timing-function:linear;
}
 

Código HTML:

<div class="caja">  </div>
 

Saludos cordiales

[g3kdigital]

Hola

Interesante duda la que planteas. Aunque debo reconocer que un ":unhover" sería genial. Lo cierto es que no existe (hasta donde sé) en CSS un seudoselector "mouse-leave" o "mouse-out" o parecidos, esos son terrenos del Javascript o Jquery.

Tampoco sabría si hay alguna forma de lograr la reversa de una animación automaticamente, sin tener que crear otra animación por keyframe con el efecto contrario por lo menos en la especificación actual del css3.

Pero, si se me ocurren diferentes formas de abordar lo que quieres con css.

La forma más rapida que se me ocurrió lo puedes ver aquí:

http://codepen.io/g3kdigital/pen/mEndf

Lo que hice fue que cogí la propiedad transition para que cualquier cambio de propiedades en el css se anime automáticamente.

Coloque la propiedad que animas a la clase y al hover. Aunque bien no logra el efecto por completo, sí llega a verse una transición más leve entre los estados.

[pzin]

Puedes usar tal vez animation-direction que tiene un valor reverse, tal vez haciendo una animación en el estado natural y otra cuando se pase el mouse por encima. Pero tal vez tengas algún problema con que no se realice la animación al sacarlo, ya que igual choca ese forwards, y sin eso pues no se mantiene. Haré alguna prueba por la tarde.

Si la animación sólo tuviera "una vuelta" podrías usar cubic-bezier() para timing-function.

[berkeleyPunk]

Iniciado por pzin

Puedes usar tal vez animation-direction que tiene un valor reverse, tal vez haciendo una animación en el estado natural y otra cuando se pase el mouse por encima...

Maestro pzin, gracias por responder. Igualmente al compañero g3kdigital.

Se me ocurrió hacer un menú animado, como el de aquí http://master.demo.offlajn.com/demo.html#GI_glassymenu (El menú está del lado izquierdo de la página.) La idea es la misma que en este ejemplo, salvo que me parece se vería más agradable si hubiera una animación de rebote cuando llegue al final de la ida y al final de la vuelta.

Ya le estuve moviendo al código y no sale . Aun espero que el maestro pzin haga sus pruebas.

Imaginaba que las animaciones de CSS3 traerían consigo la posibilidad de animar el regreso. Por el momento secundaré la idea de g3kdigital: "esos son terrenos del Javascript o Jquery." Apenas conozco algo de jQuery. Conozco un poco mejor JS. Voy a intentar lo siguiente: hacer 2 animaciones, la de ida y la de vuelta. Y con los listeners tratar de hacer que se ejecute la respectiva animación cuando se pone y quita el cursor del elemento a animar.

Saludos y nos leemos al rato!
::

[pzin]

Pues estuve probando con poco éxito.

Si no te importa tener dos animaciones, puedes hacer algo así:



Curiosamente no funciona con la misma animación, que son totalmente iguales, sólo cambia el nombre. Pero al usar la misma parece quedarse estoicamente congelado por forwards.

Estuve probando con reverse y alternate-reverse pero sólo funciona en la misma petición de la animación.

Si fuese un pelín más simple la animación se podría igual hacer algo con transition. Bueno de hecho tal vez se puede así combinando transformaciones con anchos, cubic-bezier() y animation-delay.

[berkeleyPunk]

Iniciado por pzin

Pues estuve probando con poco éxito...

¿Poco éxito?

Yo diría que lo hiciste bien, nuevamente, maestro pzin.

Aunque quizá con lo de poco éxito te refieras a ese anti-estético efecto del inicio : cuando se carga la página, inmediatamente se ejecuta la animación llamada reducir, que hace que se meta el div en el costado izquierdo de la pantalla. Uno diría: "pero yo quiero que ese div se anime sólo cuando yo le ponga o le quite el cursor de encima, ¡no tantes!".

De cualquier modo, lo hiciste y eso vale un punto más.

Abrí este post en el foro de CSS con el fin de encontrar solución en CSS, lo sé. Pero dadas las dificultades planteadas por los aquí presentes, me desmoralicé . Así que traté de echarme una mano con un poco de javascript. La cosa resultó bien. Dejo el código aquí, para a quien le interese (voy a postear mi solución con js porque no saben cómo odio -- a esa gente que pide ayuda en los foros y cuando logran solucionar por sí solos, o por otra parte, sus problemas, regresan al foro a postear algo así como: "ya solucioné mi problema, adiós". Y uno se queda con las palabras en la boca: "Sí, %$&()#$, pero dinos cómo le hiciste, que los foros son para eso, para ayudarnos todos, no para que te quedes la información y las respuestas para ti solo!"):

Código CSS:

@-webkit-keyframes ida
{
    0%   {-webkit-transform:translateX(0px);}
    25%  {-webkit-transform:translateX(500px);}
    55%  {-webkit-transform:translateX(300px);}
    75%  {-webkit-transform:translateX(500px);}
    90%  {-webkit-transform:translateX(450px);}
    100% {-webkit-transform:translateX(500px);}
}
@-webkit-keyframes vuelta
{
    0%   {-webkit-transform:translateX(500px);}
    25%  {-webkit-transform:translateX(0px);}
    55%  {-webkit-transform:translateX(300px);}
    75%  {-webkit-transform:translateX(0px);}
    90%  {-webkit-transform:translateX(100px);}
    100% {-webkit-transform:translateX(0px);}
}
 
#caja {
    position:relative;
    top:0px;
    left:-600px;
    width:700px;
    height:100px;
    background-color:black;
}
 

Código Javascript:

window.onload = function()
    {
        var caja = document.getElementById("caja");
        
        caja.addEventListener('mouseover',function()
        {
            caja.style.webkitAnimationName = 'ida';
            caja.style.webkitAnimationDuration = '1s';
            caja.style.webkitAnimationFillMode = 'forwards';
            caja.style.webkitAnimationIterationCount = '1';
            caja.style.webkitAnimationTimingFunction = 'ease';
 
        },false)
 
        caja.addEventListener('mouseout',function()
        {
            caja.style.webkitAnimationName = 'vuelta';
            caja.style.webkitAnimationDuration = '1s';
            caja.style.webkitAnimationFillMode = 'forwards';
            caja.style.webkitAnimationIterationCount = '1';
            caja.style.webkitAnimationTimingFunction = 'ease';
 
        },false)
    }
 

Código HTML:

<div id="caja"></div>
 

Saludos cordiales

[g3kdigital]

Excelente.

Lo cierto es que aprendí bastante de este post, la solución PZIN era bastante mas sencilla que la que pensé con transition.

No conocía animation-direction ha sido todo un descubrimiento y excelente BerkeleyPunk, te felicito por haberlo logrado .

[g3kdigital]

Hola nuevamente

Bueno, lo cierto es que aunque ya "concluimos" lo de la animación en reversa, quise probar lo de las curvas bezier que proponía PZIN y al hacerlo encontre una manera de lograr el mismo efecto en concreto hasta en menos lineas de código prescindiendo del @keyframe y sin usar javascript para lograr el ":unhover" de paso.

Código HTML:

<div></div>
 

Código CSS:

div 
{
  position:relative;
  top:0px;
  left:-600px;
  width:700px;
  height:100px;
  background-color: lightSeaGreen;
  -webkit-transform:translateX(0px);
  transition: all cubic-bezier(0.68, -0.55, 0.265, 1.55) 1s;
}
 
div:hover
{
  -webkit-transform:translateX(500px);
}
 

Pueden comprobarlo aquí: http://codepen.io/g3kdigital/pen/GAijg

[berkeleyPunk]

Iniciado por g3kdigital

...quise probar lo de las curvas bezier que proponía PZIN y al hacerlo [B]encontre una manera de lograr el mismo efecto...

Ah, caray, pues bien. Diste con otra solución al problema de este post. Y sin duda con un código más ligero. Eso vale algo.

Antes ya había googleado un poco para conocer el funcionamiento de cubic-bezier. Y hasta donde entiendo, cubic-bezier es la forma difícil de definir el transition-timing-function por medio de números. La forma fácil es poner ease, ease-in, ease-out, etc. Compañero g3kdigital, puedes ahondar un poco en la explicación de los parámetros que lleva cubic-bezier, para qué sirve cada número que se coloca?


Saludos

[pzin]

Si a eso mismo refería con usar cubic-bezier(). Pero no queda totalmente igual, por eso decía lo de "si la animación fuese más simple". De todas formas animando múltiples propiedades y combinándolo con delay se podría llegar a hacer exactamente el mismo efecto.

berkeleyPunk la función crea una Curva de Bézier. La cosa es que al poder poner números negativos, se crea una especie de animación extra —visualmente, ya que matemáticamente no lo es.

Yo suelo usar mucho este sitio para hacerlas menos artesalnamente: http://cubic-bezier.com

[berkeleyPunk]

Bueno, pues parece que ahora sí ya se puede dar por cerrado este post.

Buenas tardes y hasta pronto.

Saludos

[g3kdigital]

Iniciado por pzin

berkeleyPunk la función crea una [URL="http://es.wikipedia.org/wiki/Curva_de_B%C3%A9zier"][I]Curva de Bézier[/I][/URL]. La cosa es que al poder poner números negativos, se crea una especie de animación extra —visualmente, ya que matemáticamente no lo es.

Yo suelo usar mucho este sitio para hacerlas menos artesalnamente: [url]http://cubic-bezier.com[/url]

Pues PZIN lo ha resumido bastante, yo tampoco lo había usado hasta que el lo menciono, me puse a investigar y encontré este [URL="http://www.cristalab.com/blog/10-secretos-de-css3-que-tal-vez-no-conocias-c102271l/"]link[/URL]: en el otro usuario recomendó precisamente la misma página que recomendó PZIN creada por Vea Lerou, cuando vi lo de los negativos, simplemente pensé ¿Qué tal y sí? .

El funcionamiento lo entiendo así:

La aceleración y la desaceleración se forman mediante esta curva. Los números equivalen a los coordinadas de los puntos "bezier" en el plano de coordenadas bezier y no de lo puntos de origen , no son del elemento en sí a animar ni del espacio o dimensiones relativas o absolutas al "padre" contenedor del elemento (lo digo, porque esto me confundió al principio).

Siendo la primera coordenada horizontal "x" y la segunda vertical "y". Se podría leer así:

( PI ( X , Y ) , PF ( X , Y ) ) => PI = Punto de Inicio & PF = PuntoFinal

Como curiosidad solo "Y" puede tomar valores negativos, dando como resultado este vistoso efecto.

Y bueno, debí mencionarlo como sí hizo PZIN, solo funciona para animaciones no tan complejas y creo que el el efecto de denomina "bouncing" y que si lo pensamos bien puede resultar bueno como sustituto del efecto flashero en botones o efectos hover: o :focus UI.

Y sí ya se puede dar por terminado el post Feliz día!.