L'animazione funziona parzialmente ma non completamente

Question

Al momento ho this, un piccolo DIV che scorre dall'alto verso il centro di un contenitore DIV quando il mouse passa sopra il contenitore DIV; ma al passaggio del mouse, torna indietro da dove proviene. Quello che mi piacerebbe fare è far scivolare DIV dall'altra parte del DIV, direttamente di fronte a dove è entrato.

È possibile utilizzare solo CSS? (Immagino con JQuery che sarebbe stato più semplice)

<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

E proprio quando tutti sono convinti che non funzionera 'con i CSS solo:

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

Ho usato un animazione per la MouseEnter e un TRANSIZIONE per la mouseLeave

Edit: aggiunto firefox fissare

Edit: Spiegazione:
(io uso sempre -webkit- -prefixes, solo per spiegare in Chrome e Safari, Firefox utilizza il -prefix -moz-, opera il -o- - prefisso)

Quando non succede nulla:
il blocco è nella parte inferiore delle div.blocks (top:80px;), con un'opacità di 0, anche non c'è animazione esecuzione

Quando bilico:
il blocco si muove istantanei all'inizio senza transizione (vedi: -webkit-transition: none;), perché quindi l'animazione down-1 è in esecuzione. L'animazione sposta il blocco da top:0 a top:40px; in .25s. Dopo l'animazione, il blocco rimane a top:40px; perché è quello che ho aggiunto in .blocks:hover .blocks_title.

Quando mousleaving:
non c'è animazione in esecuzione più, ma il blocco si muove da top:40px a top:80px; in .25s a causa della -webkit-transition: all .25s;