Javascript 制作页面内容滑块动画

我想制作一个两页的滑块来浏览内容。可以制作一个CSS代码来制作这样的动画吗？

像这样

css

body {
    font:normal 1.25em/1.5 Arial, sans-serif;
}

.demo-wrapper {
    max-width: 640px;
    margin: 0 0 1em;
    padding: 5px;
    border: 1px solid #CCC;
    background: #F4F4F4;
}

/**
 * Slider CSS
 */
.slider {
    /* For no JS situations */
    overflow: auto;
}
.slider > ul {
    margin: 0;
    padding: 0;

    /* Force list items onto a single line and remove white space */
    font-size: 0;
    white-space: nowrap;

    /* Only WebKit requires prefix */
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}
.slider > ul > li {
    display: inline-block;
}
.slider .next,
.slider .prev {
    position: absolute;
    top: 50%;
    margin-top: -1em;
    padding: .5em;
    line-height: 1;
    text-decoration: none;
    color: white;
    background: rgba(0, 0, 0, .25);
    cursor: pointer;
}
.slider .next {
    right: 0;
}
.slider .prev {
    left: 0;
}

.slider .prev.is-disabled,
.slider .next.is-disabled {
    opacity: .25;
}

/* Full width variation */
.slider--fit li {
    width: 100%;
}

---

是的，类似于“演示”，但我希望进行一些转换，如我的示例中所示。单击“下一步”时，它会向相反方向过渡几个像素，然后进入下一页。