Modify CSS3 animation with Javascript

Question

First of all, here is the basic code for the site I need help with: check bottom for edit

I'd like some help with the animation itself, because if I'm at div 1 and press any key, it works like a charm. But if I'm at div 3 and want to go to div 2, for example, it first loads div 1 and then goes to div 2. I know why it does it, but I can't think of a way to go around it. Any ideas?

I'd also like to pause the function from inputs if the animation is already playing (so you can't spam numbers and mess up the animation). How could I do that in an easy way?

Thanks!

EDIT

Due to a few very nice guys asking for me not being lazy, OP delivers: http://jsfiddle.net/G4PXj/7

Also; http://codepen.io/anon/pen/zJsBH

Also, press HTML-box, then 2,3 or 4 and wait a few seconds for the animation to load into FOV.

HTML:

<div id="fourth" class="hidden">Fourth box
    <button onClick="fubar('first');">First page</button>
</div>
<div id="third" class="hidden">Third div</div>
<div id="second" class="hidden">Som text in the second</div>
<div id="first">Some content
    <button onClick="fubar('second');">Second page</button>
</div>

Style:

@charset "utf-8";
body {
    background-color: #fff;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
#first {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    color: #fff;
    box-shadow: 0 0 40px #333;
    background-color: #000;
}
#second {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background-color: green;
}
#third {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background-color: red;
}
#fourth {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background-color: blue;
}
.hidden {
    display: none;
}
.test {
    -moz-animation-name: wat;
    -webkit-animation-name: wat;
    -moz-animation-duration: 4s;
    -webkit-animation-duration: 4s;
    -moz-animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;
    -moz-animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
    -moz-animation-direction: normal;
    -webkit-animation-direction: normal;
    z-index: 100;
    display: block;
}
@-moz-keyframes wat {
    0% {margin-left:-3000px;}
    60% {margin-left: 200px;}
    100% {margin-left: 0;}
}
@-webkit-keyframes wat {
    0% {margin-left:-3000px;}
    60% {margin-left: 200px;}
    100% {margin-left: 0;}
}

Javascript:

function clearAll() {
    document.getElementById('first').className = '';
    document.getElementById('second').className = '';
    document.getElementById('third').className = '';
    document.getElementById('fourth').className = '';
}

function troll(objectID) {
    document.getElementById(objectID).className += ' test';
}

function fubar(objectID) {
    clearAll();
    troll(objectID);
}

function KeyCheck(e) {
    var KeyID = (window.event) ? event.keyCode : e.keyCode;
    switch (KeyID) {

    case 49:
        clearAll();
        troll('first');
        break;

    case 50:
        clearAll();
        troll('second');
        break;

    case 51:
        clearAll();
        troll('third');
        break;

    case 52:
        clearAll();
        troll('fourth');
        break;
    }
}
document.onkeyup = KeyCheck;

Answer 1

You could keep track of the previous page so that its z-index remains.

// CSS
.page{
  z-index: 0;
  // your other page settings
}
.previous{
  z-index: 99;
}
.test{
  z-index: 100;
  // your animation settings
}

Code :

document.getElementById('button1').onclick = function(){ gotoPage('first'); }
document.getElementById('button2').onclick = function(){ gotoPage('second'); }
var previous, current;

function gotoPage(id){
    // simplified className manipulation
    if(previous) previous.className = 'page';
    previous = current;
    if(previous) previous.className = 'page previous';
    current = document.getElementById(id);
    current.className = 'page test';
}

// key detection, etc.

jQuery version :

// JS
$('#button1').click(function(){ gotoPage('first'); });
$('#button2').click(function(){ gotoPage('second'); });
var $previous, $current;

function gotoPage(id){
  if($previous) $previous.removeClass('previous');
  $previous = $current;
  if($previous) $previous.removeClass('test').addClass('previous');
  $current = $('#' + id).addClass('test').removeClass('hidden');
}

// key detection, etc.

Fiddle : http://jsfiddle.net/G4PXj/9/

This ensures a pages layout with the following z-indexes : 100 for current (ie the animated page, you want it to be displayed above all others), 99 for previous (the page you are leaving : display above all the others, but still behind the animated page) and 0 for the rest, which are pages unrelated to the animation.

The gotoPage() function sets the page you are leaving (ie current) to previous, and the page you want to reach (ie document.getElementById(id)) to current. The layout then applies to these new pages settings.

As for pauses, here is a great example in this related question : How to pause and resume CSS3 animation using JavaScript?