Off canvas layout with CSS transitions

gistfile1.css

.pane {
    position: absolute;
    width: 100%;
    height: 100%;
    
    -webkit-transition: left 0.25s ease-in-out;
    -moz-transition: left 0.25s ease-in-out;
    -o-transition: left 0.25s ease-in-out;
    transition: left 0.25s ease-in-out;
}
.container.pane {
    overflow: hidden;
}
.left.pane {
    left: -100%;
    background: pink;
}
.middle.pane {
    left: -100%;
    background: lightgreen;
}
.selected.pane + .middle.pane {
    left: 100%;
}
.right.pane {
    left: 100%;
    background: lightblue;
}
.selected.pane {
    left: 0;
}

gistfile2.html

<div class="container pane">
    <section id="one" class="left pane">
        [Left Pane]
        <a href="#two">Next</a>
    </section>
    <section id="two" class="selected middle pane">
        [Middle Pane]
        <a href="#one">Back</a>
        <a href="#three">Next</a>
    </section>
    <section id="three" class="right pane">
        [Right Pane]
        <a href="#two">Back</a>
    </section>
</div>

gistfile3.js

$('a').click(function(event) {
    var a = $(this);
    a.parent().removeClass('selected');
    $(a.attr('href')).addClass('selected');
    event.preventDefault();
});