diff --git a/static/css/main.css b/static/css/main.css
index 06de272..bf317bd 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -73,6 +73,8 @@ a:hover {
     background: url("../img/background-letter.jpg");
     background-size: cover;
     background-position: right;
+
+    transition: 1.5s transform 0s ease-out;
 }
 
 #logo {
@@ -138,6 +140,10 @@ a:hover {
     width: 50vw;
 }
 
+.away {
+    transform: translate(-200vw, -100vh) rotate(-10deg);
+}
+
 .form-group {
     margin: 10px;
     width: 100%;
diff --git a/static/js/main.js b/static/js/main.js
index 28f7543..bf2a370 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -11,11 +11,18 @@ window.onpopstate = history.onpushstate = function(e) {
 history.pushState("#main-page", "", "")
 
 function show_page(id, historyPush) {
+    //si le z-index de la nouvelle page est inférieur on fait un transi 'forward' sinon 'backward'
     for(i in page) {
-        $(page[i]).hide();
+        $(page[i]).hide().removeClass("away");
     }
-    $(id).show();
-    if (!historyPush) {
+    
+    $hs = $(history.state).show();
+    if(!historyPush)
+        $hs.addClass('away');
+    $id = $(id).show();
+    
+
+    if(!historyPush) {
         history.pushState(id, "", "")
     }
 }
@@ -498,7 +505,7 @@ $(window).on("load", function() {
     }
 
     for(i in page) {
-        $(page[i]).css('z-index', i);
+        $(page[i]).css('z-index', page.length - i);
     }
 
     /* load timer */