translate3dがstop（的なものが）出来るかのサンプル（ホバー版、CSSのみ）

JSじゃなくCSSのみで。

by FiNGAHOLiC

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<button>hover me plz!</button>
<div class="box"></div>

CSS

button{
    margin:10px;
    padding:10px;
}
.box{
    width:100px;
    height:100px;
    top:100px;
    position:absolute;
    left:10px;
    z-index:1;
    background:#000;
    -webkit-transform:translate3d(0, 0, 0);
    -webkit-transition:all 500ms ease-out;
}
button:hover+.box{
    -webkit-transform:translate3d(200px, 0, 0);
}