html - CSS3 Overlay Target 一键-两种过渡

Question

我有一个 CSS3 div 叠加层。从左到右。单击“打开”后是否可以将 ID“内容”从右向左移动(滑动)？

http://jsfiddle.net/PpQTB/3/

.overlay-target:target {
    right: 0;
    left: 0%;
    top: 0;
    bottom: 0;
    width: 100%;
}

#content
{
/* right to left after click to overlay */
}

Answer 1

更新@tobiv 使用转换的建议:

DEMO

#content {
    -webkit-transform: translateX(0);
    -webkit-transition: -webkit-transform 0.5199s ease-in-out;
}

.overlay-target:target + #content {
    -webkit-transform: translateX(100%);
}

body {
    overflow-x: hidden;
    padding: 0;
    margin: 0;
}

原创:

您可以做一些与您已经在做的类似的事情。你需要调整时间:

DEMO

#content {
    margin-left: 0;
    -webkit-transition: margin 0.5199s ease-in-out;
}

.overlay-target:target + #content {
    margin-left: 100%;
}