css – 动画部分有效但不完全

目前我有 this,当鼠标悬停在容器DIV上时,一个小DIV从容器DIV的顶部滑入中心;但是在mouseout上,它会滑回到它来自的地方.我想做的是让DIV从DIV的另一侧滑出,直接在它进入的对面.

这可能只使用CSS吗？ (我想用JQuery会更直接)

<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;
}