"past, present and future classes on step elements"

css/impress-demo.css

@@ -256,47 +256,40 @@ body     { pointer-events: none; }
     transition:         0.5s;
 }
 
-#ing.active .positioning {
+#ing.present .positioning {
     -webkit-transform: translateY(-10px);
     -moz-transform:    translateY(-10px);
     -ms-transform:     translateY(-10px);
     -o-transform:      translateY(-10px);
     transform:         translateY(-10px);
-
-    -webkit-transition-delay: 1.5s;
-    -moz-transition-delay:    1.5s;
-    -ms-transition-delay:     1.5s;
-    -o-transition-delay:      1.5s;
-    transition-delay:         1.5s;
 }
 
-#ing.active .rotating {
+#ing.present .rotating {
     -webkit-transform: rotate(-10deg);
     -moz-transform:    rotate(-10deg);
     -ms-transform:     rotate(-10deg);
     -o-transform:      rotate(-10deg);
     transform:         rotate(-10deg);
 
-    -webkit-transition-delay: 1.75s;
-    -moz-transition-delay:    1.75s;
-    -ms-transition-delay:     1.75s;
-    -o-transition-delay:      1.75s;
-    transition-delay:         1.75s;
+    -webkit-transition-delay: 0.25s;
+    -moz-transition-delay:    0.25s;
+    -ms-transition-delay:     0.25s;
+    -o-transition-delay:      0.25s;
+    transition-delay:         0.25s;
 }
 
-#ing.active .scaling {
+#ing.present .scaling {
     -webkit-transform: scale(0.7);
     -moz-transform:    scale(0.7);
     -ms-transform:     scale(0.7);
     -o-transform:      scale(0.7);
     transform:         scale(0.7);
 
-    -webkit-transition-delay: 2s;
-    -moz-transition-delay:    2s;
-    -ms-transition-delay:     2s;
-    -o-transition-delay:      2s;
-    transition-delay:         2s;
-
+    -webkit-transition-delay: 0.5s;
+    -moz-transition-delay:    0.5s;
+    -ms-transition-delay:     0.5s;
+    -o-transition-delay:      0.5s;
+    transition-delay:         0.5s;
 }
 
 /* imagination */

js/impress.js

@@ -424,6 +424,21 @@
             return stepTo(next);
         };
         
+        // STEP CLASSES
+        steps.forEach(function (step) {
+            step.classList.add("future");
+        });
+        
+        document.addEventListener("impressStepEnter", function (event) {
+            event.target.classList.remove("future");
+            event.target.classList.add("present");
+        }, false);
+        
+        document.addEventListener("impressStepLeave", function (event) {
+            event.target.classList.remove("present");
+            event.target.classList.add("past");
+        }, false);
+        
         // HASH CHANGE
         
         // `#/step-id` is used instead of `#step-id` to prevent default browser