La animación funciona en parte pero no completamente

Question

Por el momento tengo this, una DIV pequeña que se desliza desde la parte superior hacia el centro de un contenedor DIV cuando el mouse se cierne sobre el contenedor DIV; pero en mouseout, se desliza hacia atrás de donde vino. Lo que me gustaría hacer es sacar el DIV del otro lado del DIV, justo enfrente de donde entró.

¿Es posible usar solo CSS? (Imagino con jQuery sería más sencillo)

<div class="blocks"> 
    <div class="blocks_title"> 
    </div> 
</div> 
<div class="blocks"> 
    <div class="blocks_title"> 
    </div> 
</div> 

.blocks { 
    position: relative; 
    float: left; 
    margin: 20px; 
    width: 100px; 
    height: 100px; 
    border: 1px dotted #333; 
    overflow: hidden; 
} 

.blocks_title { 
    position: relative; 
    width: 20px; 
    height: 20px; 
    top: 0px; 
    left: 40px; 
    background: #333; 
    opacity: 0; 
    -webkit-transition: all .25s; 
     -moz-transition: all .25s; 
      transition: all .25s; 
} 

.blocks:hover .blocks_title { 
    top: 40px; 
    opacity: 1; 
} 

Answer 1

Y justo cuando todo el mundo está convencido de que no va a funcionar sólo con CSS:

http://jsfiddle.net/Xkee9/36/

utilicé una animación para el MouseEnter y un TRANSICIÓN para la mouseleave

Editar: añadió Firefox fijar

Editar: Explicación:
(siempre uso -webkit- -prefixes, sólo para explicarlo en Chrome y Safari, Firefox utiliza el -prefix -moz-, ópera del -o- - prefijo)

Cuando no pasa nada:
el bloque es en la parte inferior de los div.blocks (top:80px;), con una opacidad de 0, también no hay animación corriendo

Cuando se cierne:
el bloque se mueve instantáneos a la parte superior sin transición (véase: -webkit-transition: none;), porque entonces la animación down-1 se está ejecutando. Esa animación mueve el bloque de top:0 a top:40px; en .25s. Después de la animación, el bloque permanece en top:40px; porque eso es lo que agregué en .blocks:hover .blocks_title.

Cuando mousleaving:
no hay animación correr más, pero el bloque se mueve desde top:40px a top:80px; en .25s debido a -webkit-transition: all .25s;