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

[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