想让div藏到页面右侧然后实现滚动进入页面

自己想的方法总是实现不出来：
1.将div hidden隐藏
2.用js加上class：

.each {position: absolute;
left: 100%;
top: 0;}
这里有个问题，加上这个class，整个页面就变宽了（在不隐藏的情况下）

3.再加上class：

.in {
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
    transition: transform 3s;
}

贴上js代码：

function move(listenerTag, outTag, inTag) {
    listenerTag.on("mouseover", function () {
        outTag.addClass("out");
        setTimeout(function () {
            outTag.attr("hidden", "hidden").removeClass("out in each");
            inTag.addClass("each").removeAttr("hidden").addClass("in");
        }, 1000);
    });
}

我的代码在本应缓缓进入时总是立即出现，求修改

---

你需要的是animation，如果按你得想法，如图：

可以实现

---

我做的这个效果就没有发现页面变宽，请看：http://keep.phpcyy.com