CodePen

HTML

            
              <form action="">
  <input id="reveal" type="button" value="Reveal secret">
</form>
<div id="container">
  <div id="back">
    <div class="box blue">Box</div>
  </div>
  <div id="front">
    <div class="box green">Box</div>
  </div>
</div>

            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              @-webkit-keyframes bluebox {
    0% {
        -webkit-transform: translate(0, 0);
        opacity: 0;
    }

    100% {
        -webkit-transform: translate(300px, 0);
        opacity: 1;
    }
}

@-moz-keyframes bluebox {
    0% {
        -moz-transform: translate(0, 0);
        opacity: 0;
    }

    100% {
        -moz-transform: translate(300px, 0);
        opacity: 1;
    }
}


@-webkit-keyframes greenbox {
    0% {
        -webkit-transform: translate(0, 0);
        opacity: 1;
    }

    100% {
        -webkit-transform: translate(300px, 0);
        opacity: 0;
    }
}


@-moz-keyframes greenbox {
    0% {
        -moz-transform: translate(0, 0);
        opacity: 1;
    }

    100% {
        -moz-transform: translate(300px, 0);
        opacity: 0;
    }
}

#back, #front {
    transition-property: transform;
    transition-duration: 2s;
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 0.5s;
    -moz-transition-property: -moz-transform;
    -moz-transition-duration: 2s;
}

.behind {
    transform: translate(50px, 50px);
    -webkit-transform: translate(50px, 50px);
    -moz-transform: translate(50px, 50px);
}

.ahead {
    transform: translate(0px, 100px);
    -webkit-transform: translate(0px, 100px);
    -moz-transform: translate(0px, 100px);
}


.box {
    position: absolute;
    top: 30px;
    left: 50px;
    color: white;
    margin: 20px;
    padding: 50px;
    width: 50px;
    transform-style: preserve-3d;
    animation-duration: 4s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-transform-style: preserve-3d;
    -webkit-animation-duration: 4s;
    -webkit-animation-direction: alternate;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-duration: 4s;
    -moz-animation-direction: alternate;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
}

.blue {
    background-color: blue;
    animation-name: bluebox;
    -webkit-animation-name: bluebox;
    -moz-animation-name: bluebox;
}

.green {
    background-color: green;
    animation-name: greenbox;
    -webkit-animation-name: greenbox;
    -moz-animation-name: greenbox;
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              window.onload = function () {
  function $$(id) {
    return document.getElementById(id);
  }
  $$('reveal').onclick = function() {
    var cls = $$('back').className;
    $$('back').setAttribute('class', (cls === '') ? 'behind': '');
    $$('front').setAttribute('class', (cls === '') ? 'ahead': '');
  };
};

            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................