如何使用 CSS 从左右网页过渡中滑入？答案

【问题标题】：How do you do slide in from the left and right web page transitions using CSS?如何使用 CSS 从左右网页过渡中滑入？
【发布时间】：2014-06-10 23:40:01
【问题描述】：

我使用与此类似的 CSS（下图）创建了从右侧和左侧滑入的页面过渡。我是从MDN CSS Animations 那里得到这个想法的。

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

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

最好的方法是什么？只支持现代浏览器就可以了。

【问题讨论】：

标签： html css css-animations css-transforms

【解决方案1】：

您可以使用 jquery 移动页面转换，非常棒。

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

/* -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%);
    }
}

请参阅此 plunker 的工作示例：http://plnkr.co/edit/EUPuHN。 （如果你想翻录 CSS 代码，请从 plunker 复制它...它包含所有供应商前缀）

【讨论】：