Html 如何使用CSS从左侧和右侧网页过渡滑入？

我使用类似于下面的CSS创建了从右滑入和从左滑入的页面转换。我是从你那里得到这个主意的

这适用于从右侧滑入的页面。但是，从左侧滑入不起作用（因为包含的div是float left）。我尝试了绝对定位和其他方法来实现从右滑入和从左滑入的页面过渡，但总有一些问题。例如，向右浮动会导致元素向右偏远。使用其他选项，我无法使页面居中、页边距和填充正确

---

最好的方法是什么？只支持现代浏览器很好。

您可以使用jquery移动页面转换，这非常好

或者，您可以像这样使用CSS转换。不要弄乱页面的设计布局。只要改变它！请注意，在撰写本文时，这些浏览器都是实验性的，但在最近的浏览器（FF29、Chrome 35和IE11）中测试得很好

请参阅此plunker的工作示例：。（如果你想撕开CSS代码，从plunker中复制它……它有所有的供应商前缀）

/* -webkit-, -moz-, -o- vendor prefixes omitted for brevity.
    See http://css-tricks.com/snippets/css/keyframe-animation-syntax/
    */
.slidein-from-right {
    animation: slidein-from-right 500ms;
}
@keyframes slidein-from-right {
    from {
        margin-left: 100%;
        width: 300%;
        opacity: 0;
    }
    to {
        margin-left: 0%;
        width: 100%;
        opacity: 1;
    }
}
.slidein-from-left {
    animation: slidein-from-left 500ms;
}
@keyframes slidein-from-left {
    from {
        margin-right: 100%;
        width: 300%;
        opacity: 0;
    }
    to {
        margin-right: 0%;
        width: 100%;
        opacity: 1;
    }
}

/* -webkit-, -moz-, -o- vendor prefixes omitted for brevity.
    See http://css-tricks.com/snippets/css/keyframe-animation-syntax/
    */
.slidein-from-right {
    -webkit-animation: slidein-from-right2 500ms;
}
@-webkit-keyframes slidein-from-right2 {
    from {
        opacity: 0;
        -webkit-transform:translateX(100%);
    }
    to {
        opacity: 1;
        -webkit-transform:translateX(0%);
    }
}