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

[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