Animacja częściowo działa, ale nie całkowicie

Question

W tej chwili mam this, mały DIV, który wsuwa się od góry do środka DIV pojemnika, gdy mysz unosi się nad pojemnikiem DIV; ale na wyjściu myszy wycofuje się do miejsca, z którego pochodzi. Chciałbym, żeby DIV wysunął się po drugiej stronie DIV, dokładnie tam, gdzie wszedł.

Czy to możliwe za pomocą samego CSS? (Wyobrażam sobie z JQuery byłoby prostsze)

<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

I właśnie wtedy, gdy wszyscy są przekonani, że to nie zadziała tylko CSS:

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

użyłem animacji dla mouseenter i ZMIANA SLAJDU dla mouseLeave

Edit: dodano firefox naprawić

EDIT: Objaśnienie:
(Zawsze używam -webkit- -prefixes, żeby wyjaśnić to w Chrome i Safari, Firefox używa -moz- -prefix, Opera -o- - prefix)

Kiedy nic nie dzieje:
blok jest w dolnej części div.blocks (top:80px;), ze zmętnienie 0, również nie animacja działa

po najechaniu:
ruchy blokowe chwilowych do góry bez przejściowego (patrz -webkit-transition: none;), ponieważ następnie działa animacja down-1. Ta animacja przesuwa blok z top:0 do top:40px; w .25s. Po animacji blok pozostaje na top:40px;, ponieważ to dodałem w .blocks:hover .blocks_title.

Kiedy mousleaving:
animacja nie ma już uruchomiony, ale porusza się blok z top:40px do top:80px; w .25s powodu -webkit-transition: all .25s;