动画部分有效但不完全

Question

目前我有 this ，一个小DIV，当鼠标悬停在容器DIV上时，它会从顶部滑入容器DIV的中心；但是在鼠标移出时，它会滑回原来的位置。我想要做的是让 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;
}

Answer 1

就在每个人都确信它不会仅与 css 一起工作时:

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

我为 mouseenter 使用了一个动画，为 mouseleave 使用了一个过渡

编辑:添加了 firefox 修复

编辑:解释:
(我总是使用-webkit- -前缀，只是为了在Chrome和Safari中解释它，Firefox使用-moz- -前缀，opera -o- -前缀)

当什么都没发生时:
该 block 位于 div.blocks (top:80px;) 的底部，不透明度为 0，也没有动画运行

悬停时:
block 立即移动到顶部，没有过渡(参见:-webkit-transition: none;)，因为那时动画 down-1 正在运行。该动画在 .25 秒内将 block 从 top:0 移动到 top:40px;。动画结束后， block 停留在 top:40px;，因为这是我在 .blocks:hover .blocks_title 中添加的内容。

当老鼠离开时:
不再有动画运行，但是 block 从 top:40px 移动到 top:80px; 因为 -webkit-transition: all .25s 在 .25s 内;