diff --git a/src/themes/default/modules/transition.overrides b/src/themes/default/modules/transition.overrides
index 2dae30e51..bc805f01a 100644
--- a/src/themes/default/modules/transition.overrides
+++ b/src/themes/default/modules/transition.overrides
@@ -1,5 +1,5 @@
 /*******************************
-           Animations
+       Static Animations
 *******************************/
 
 /*--------------
@@ -103,246 +103,36 @@
   0% {
     transform: scale3d(1, 1, 1);
   }
-
   30% {
     transform: scale3d(1.25, 0.75, 1);
   }
-
   40% {
     transform: scale3d(0.75, 1.25, 1);
   }
-
   50% {
     transform: scale3d(1.15, 0.85, 1);
   }
-
   65% {
     transform: scale3d(.95, 1.05, 1);
   }
-
   75% {
     transform: scale3d(1.05, .95, 1);
   }
-
   100% {
     transform: scale3d(1, 1, 1);
   }
 }
 
-/*--------------
-     Flips
----------------*/
-
-.flip.transition.in,
-.flip.transition.out {
-  perspective: 2000px;
-}
-.horizontal.flip.transition.in {
-  animation-name: horizontalFlipIn;
-}
-.horizontal.flip.transition.out {
-  animation-name: horizontalFlipOut;
-}
-.vertical.flip.transition.in {
-  animation-name: verticalFlipIn;
-}
-.vertical.flip.transition.out {
-  animation-name: verticalFlipOut;
-}
-
-/* Horizontal */
-@keyframes horizontalFlipIn {
-  0% {
-    transform: rotateY(-90deg);
-    opacity: 0;
-  }
-  100% {
-    transform: rotateY(0deg);
-    opacity: 1;
-  }
-}
-/* Horizontal */
-@keyframes horizontalFlipOut {
-  0% {
-    transform: rotateY(0deg);
-    opacity: 1;
-  }
-  100% {
-    transform: rotateY(90deg);
-    opacity: 0;
-  }
-}
-
-/* Vertical */
-@keyframes verticalFlipIn {
-  0% {
-    transform: rotateX(-90deg);
-    opacity: 0;
-  }
-  100% {
-    transform: rotateX(0deg);
-    opacity: 1;
-  }
-}
-@keyframes verticalFlipOut {
-  0% {
-    transform: rotateX(0deg);
-    opacity: 1;
-  }
-  100% {
-    transform: rotateX(-90deg);
-    opacity: 0;
-  }
-}
-
-/*--------------
-      Scale
----------------*/
-
-.scale.transition.in {
-  animation-name: scaleIn;
-}
-.scale.transition.out {
-  animation-name: scaleOut;
-}
-
-/* Scale */
-@keyframes scaleIn {
-  0% {
-    opacity: 0;
-    transform: scale(0.7);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-@keyframes scaleOut {
-  0% {
-    opacity: 1;
-    transform: scale(1);
-  }
-  100% {
-    opacity: 0;
-    transform: scale(0.7);
-  }
-}
-
-/*--------------
-     Drop
----------------*/
-
-.drop.transition {
-  transform-origin: top center;
-  animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
-}
-.drop.transition.in {
-  animation-name: dropIn;
-}
-.drop.transition.out {
-  animation-name: dropOut;
-}
-
-/* Scale */
-@keyframes dropIn {
-  0% {
-    opacity: 0;
-    transform: scale(0);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-@keyframes dropOut {
-  0% {
-    opacity: 1;
-    transform: scale(1);
-  }
-  100% {
-    opacity: 0;
-    transform: scale(0);
-  }
-}
-
-/*--------------
-     Browse
----------------*/
 
-.browse.transition.in {
-  animation-name: browseIn;
-  animation-timing-function: ease;
-}
-.browse.transition.out,
-.browse.transition.out.left {
-  animation-name: browseOutLeft;
-  animation-timing-function: ease;
-}
-.browse.transition.out.right {
-  animation-name: browseOutRight;
-  animation-timing-function: ease;
-}
 
-@keyframes browseIn {
-  0% {
-    transform: scale(0.8) translateZ(0px);
-    z-index: -1;
-  }
-  10% {
-    transform: scale(0.8) translateZ(0px);
-    z-index: -1;
-    opacity: 0.7;
-  }
-  80% {
-    transform: scale(1.05) translateZ(0px);
-    opacity: 1;
-    z-index: 999;
-  }
-  100% {
-    transform: scale(1) translateZ(0px);
-    z-index: 999;
-  }
-}
-@keyframes browseOutLeft {
-  0% {
-    z-index: 999;
-    transform: translateX(0%) rotateY(0deg) rotateX(0deg);
-  }
-  50% {
-    z-index: -1;
-    transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
-  }
-  80% {
-    opacity: 1;
-  }
-  100% {
-    z-index: -1;
-    transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
-    opacity: 0;
-  }
-}
-@keyframes browseOutRight {
-  0% {
-    z-index: 999;
-    transform: translateX(0%) rotateY(0deg) rotateX(0deg);
-  }
-  50% {
-    z-index: 1;
-    transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
-  }
-  80% {
-    opacity: 1;
-  }
-  100% {
-    z-index: 1;
-    transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
-    opacity: 0;
-  }
-}
+/*******************************
+          Transitions
+*******************************/
 
 /*--------------
      Bounce
 ---------------*/
+
 .transition.bounce.in {
   animation-name: bounceIn;
   animation-timing-function: ease;
@@ -380,29 +170,23 @@
   0%, 20%, 40%, 60%, 80%, 100% {
     transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
   }
-
   0% {
     opacity: 0;
     transform: scale3d(.3, .3, .3);
   }
-
   20% {
     transform: scale3d(1.1, 1.1, 1.1);
   }
-
   40% {
     transform: scale3d(.9, .9, .9);
   }
-
   60% {
     opacity: 1;
     transform: scale3d(1.03, 1.03, 1.03);
   }
-
   80% {
     transform: scale3d(.97, .97, .97);
   }
-
   100% {
     opacity: 1;
     transform: scale3d(1, 1, 1);
@@ -412,25 +196,20 @@
   0%, 60%, 75%, 90%, 100% {
     transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
   }
-
   0% {
     opacity: 0;
     transform: translate3d(0, 3000px, 0);
   }
-
   60% {
     opacity: 1;
     transform: translate3d(0, -20px, 0);
   }
-
   75% {
     transform: translate3d(0, 10px, 0);
   }
-
   90% {
     transform: translate3d(0, -5px, 0);
   }
-
   100% {
     transform: translate3d(0, 0, 0);
   }
@@ -439,25 +218,20 @@
   0%, 60%, 75%, 90%, 100% {
     transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
   }
-
   0% {
     opacity: 0;
     transform: translate3d(0, -3000px, 0);
   }
-
   60% {
     opacity: 1;
     transform: translate3d(0, 25px, 0);
   }
-
   75% {
     transform: translate3d(0, -10px, 0);
   }
-
   90% {
     transform: translate3d(0, 5px, 0);
   }
-
   100% {
     transform: none;
   }
@@ -466,25 +240,20 @@
   0%, 60%, 75%, 90%, 100% {
     transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
   }
-
   0% {
     opacity: 0;
     transform: translate3d(3000px, 0, 0);
   }
-
   60% {
     opacity: 1;
     transform: translate3d(-25px, 0, 0);
   }
-
   75% {
     transform: translate3d(10px, 0, 0);
   }
-
   90% {
     transform: translate3d(-5px, 0, 0);
   }
-
   100% {
     transform: none;
   }
@@ -493,25 +262,20 @@
   0%, 60%, 75%, 90%, 100% {
     transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
   }
-
   0% {
     opacity: 0;
     transform: translate3d(-3000px, 0, 0);
   }
-
   60% {
     opacity: 1;
     transform: translate3d(25px, 0, 0);
   }
-
   75% {
     transform: translate3d(-10px, 0, 0);
   }
-
   90% {
     transform: translate3d(5px, 0, 0);
   }
-
   100% {
     transform: none;
   }
@@ -521,12 +285,10 @@
   20% {
     transform: scale3d(.9, .9, .9);
   }
-
   50%, 55% {
     opacity: 1;
     transform: scale3d(1.1, 1.1, 1.1);
   }
-
   100% {
     opacity: 0;
     transform: scale3d(.3, .3, .3);
@@ -536,12 +298,10 @@
   20% {
     transform: translate3d(0, -10px, 0);
   }
-
   40%, 45% {
     opacity: 1;
     transform: translate3d(0, 20px, 0);
   }
-
   100% {
     opacity: 0;
     transform: translate3d(0, -2000px, 0);
@@ -551,12 +311,10 @@
   20% {
     transform: translate3d(0, 10px, 0);
   }
-
   40%, 45% {
     opacity: 1;
     transform: translate3d(0, -20px, 0);
   }
-
   100% {
     opacity: 0;
     transform: translate3d(0, 2000px, 0);
@@ -567,7 +325,6 @@
     opacity: 1;
     transform: translate3d(20px, 0, 0);
   }
-
   100% {
     opacity: 0;
     transform: translate3d(-2000px, 0, 0);
@@ -578,7 +335,6 @@
     opacity: 1;
     transform: translate3d(-20px, 0, 0);
   }
-
   100% {
     opacity: 0;
     transform: translate3d(2000px, 0, 0);
@@ -586,85 +342,118 @@
 }
 
 /*--------------
-     Slide
+     Browse
 ---------------*/
-.transition.slide.in,
-.transition.slide.in.down {
-  animation-name: slideInY;
-  transform-origin: top center;
-}
-.transition.slide.in.up {
-  animation-name: slideInY;
-  transform-origin: bottom center;
-}
-.transition.slide.in.left {
-  animation-name: slideInX;
-  transform-origin: center right;
-}
-.transition.slide.in.right {
-  animation-name: slideInX;
-  transform-origin: center left;
-}
-.transition.slide.out,
-.transition.slide.out.down {
-  animation-name: slideOutY;
-  transform-origin: top center;
-}
-.transition.slide.out.up {
-  animation-name: slideOutY;
-  transform-origin: bottom center;
+
+.browse.transition.in {
+  animation-name: browseIn;
+  animation-timing-function: ease;
 }
-.transition.slide.out.left {
-  animation-name: slideOutX;
-  transform-origin: center right;
+.browse.transition.out,
+.browse.transition.out.left {
+  animation-name: browseOutLeft;
+  animation-timing-function: ease;
 }
-.transition.slide.out.right {
-  animation-name: slideOutX;
-  transform-origin: center left;
+.browse.transition.out.right {
+  animation-name: browseOutRight;
+  animation-timing-function: ease;
 }
 
-@keyframes slideInY {
+@keyframes browseIn {
   0% {
-    opacity: 0;
-    transform: scaleY(0);
+    transform: scale(0.8) translateZ(0px);
+    z-index: -1;
   }
-  100% {
+  10% {
+    transform: scale(0.8) translateZ(0px);
+    z-index: -1;
+    opacity: 0.7;
+  }
+  80% {
+    transform: scale(1.05) translateZ(0px);
     opacity: 1;
-    transform: scaleY(1);
+    z-index: 999;
+  }
+  100% {
+    transform: scale(1) translateZ(0px);
+    z-index: 999;
   }
 }
-@keyframes slideInX {
+@keyframes browseOutLeft {
   0% {
-    opacity: 0;
-    transform: scaleX(0);
+    z-index: 999;
+    transform: translateX(0%) rotateY(0deg) rotateX(0deg);
   }
-  100% {
+  50% {
+    z-index: -1;
+    transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
+  }
+  80% {
     opacity: 1;
-    transform: scaleX(1);
+  }
+  100% {
+    z-index: -1;
+    transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
+    opacity: 0;
   }
 }
-@keyframes slideOutY {
+@keyframes browseOutRight {
   0% {
+    z-index: 999;
+    transform: translateX(0%) rotateY(0deg) rotateX(0deg);
+  }
+  50% {
+    z-index: 1;
+    transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
+  }
+  80% {
     opacity: 1;
-    transform: scaleY(1);
   }
   100% {
+    z-index: 1;
+    transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
     opacity: 0;
-    transform: scaleY(0);
   }
 }
-@keyframes slideOutX {
+
+
+/*--------------
+      Drop
+---------------*/
+
+.drop.transition {
+  transform-origin: top center;
+  animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
+}
+.drop.transition.in {
+  animation-name: dropIn;
+}
+.drop.transition.out {
+  animation-name: dropOut;
+}
+
+/* Scale */
+@keyframes dropIn {
   0% {
+    opacity: 0;
+    transform: scale(0);
+  }
+  100% {
     opacity: 1;
-    transform: scaleX(1);
+    transform: scale(1);
+  }
+}
+@keyframes dropOut {
+  0% {
+    opacity: 1;
+    transform: scale(1);
   }
   100% {
     opacity: 0;
-    transform: scaleX(0);
+    transform: scale(0);
   }
 }
 
-
 /*--------------
       Fades
 ---------------*/
@@ -800,139 +589,299 @@
 }
 
 /*--------------
-      Swing
+     Flips
 ---------------*/
 
-@keyframes swingInX {
+.flip.transition.in,
+.flip.transition.out {
+  perspective: 2000px;
+}
+.horizontal.flip.transition.in {
+  animation-name: horizontalFlipIn;
+}
+.horizontal.flip.transition.out {
+  animation-name: horizontalFlipOut;
+}
+.vertical.flip.transition.in {
+  animation-name: verticalFlipIn;
+}
+.vertical.flip.transition.out {
+  animation-name: verticalFlipOut;
+}
+
+/* Horizontal */
+@keyframes horizontalFlipIn {
   0% {
-    transform: perspective(1000px) rotateX(-90deg);
+    transform: rotateY(-90deg);
     opacity: 0;
   }
-
-  40% {
-    transform: perspective(1000px) rotateX(20deg);
-  }
-
-  60% {
-    transform: perspective(1000px) rotateX(-10deg);
+  100% {
+    transform: rotateY(0deg);
+    opacity: 1;
   }
-
-  80% {
-    transform: perspective(1000px) rotateX(5deg);
+}
+/* Horizontal */
+@keyframes horizontalFlipOut {
+  0% {
+    transform: rotateY(0deg);
     opacity: 1;
   }
+  100% {
+    transform: rotateY(90deg);
+    opacity: 0;
+  }
+}
 
+/* Vertical */
+@keyframes verticalFlipIn {
+  0% {
+    transform: rotateX(-90deg);
+    opacity: 0;
+  }
   100% {
-    transform: perspective(1000px) rotateX(0deg);
+    transform: rotateX(0deg);
+    opacity: 1;
   }
 }
-@keyframes swingInY {
+@keyframes verticalFlipOut {
   0% {
-    transform: perspective(1000px) rotateY(-90deg);
+    transform: rotateX(0deg);
+    opacity: 1;
+  }
+  100% {
+    transform: rotateX(-90deg);
     opacity: 0;
   }
+}
 
-  40% {
-    transform: perspective(1000px) rotateY(20deg);
-  }
+/*--------------
+      Scale
+---------------*/
 
-  60% {
-    transform: perspective(1000px) rotateY(-10deg);
-  }
+.scale.transition.in {
+  animation-name: scaleIn;
+}
+.scale.transition.out {
+  animation-name: scaleOut;
+}
 
-  80% {
-    transform: perspective(1000px) rotateY(5deg);
-    opacity: 1;
+/* Scale */
+@keyframes scaleIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.7);
   }
-
   100% {
-    transform: perspective(1000px) rotateY(0deg);
+    opacity: 1;
+    transform: scale(1);
   }
 }
-@keyframes swingOutX {
+@keyframes scaleOut {
   0% {
-    transform: perspective(1000px) rotateX(0deg);
+    opacity: 1;
+    transform: scale(1);
   }
-
-  30% {
-    transform: perspective(1000px) rotateX(20deg);
-    opacity:1;
+  100% {
+    opacity: 0;
+    transform: scale(0.7);
   }
+}
+
+/*--------------
+     Slide
+---------------*/
 
+.transition.slide.in,
+.transition.slide.in.down {
+  animation-name: slideInY;
+  transform-origin: top center;
+}
+.transition.slide.in.up {
+  animation-name: slideInY;
+  transform-origin: bottom center;
+}
+.transition.slide.in.left {
+  animation-name: slideInX;
+  transform-origin: center right;
+}
+.transition.slide.in.right {
+  animation-name: slideInX;
+  transform-origin: center left;
+}
+
+.transition.slide.out,
+.transition.slide.out.down {
+  animation-name: slideOutY;
+  transform-origin: top center;
+}
+.transition.slide.out.up {
+  animation-name: slideOutY;
+  transform-origin: bottom center;
+}
+.transition.slide.out.left {
+  animation-name: slideOutX;
+  transform-origin: center right;
+}
+.transition.slide.out.right {
+  animation-name: slideOutX;
+  transform-origin: center left;
+}
+
+@keyframes slideInY {
+  0% {
+    opacity: 0;
+    transform: scaleY(0);
+  }
   100% {
-    transform: perspective(1000px) rotateX(-90deg);
+    opacity: 1;
+    transform: scaleY(1);
+  }
+}
+@keyframes slideInX {
+  0% {
     opacity: 0;
+    transform: scaleX(0);
+  }
+  100% {
+    opacity: 1;
+    transform: scaleX(1);
   }
 }
-@keyframes swingOutY {
+@keyframes slideOutY {
   0% {
-    transform: perspective(1000px) rotateY(0deg);
+    opacity: 1;
+    transform: scaleY(1);
   }
-
-  30% {
-    transform: perspective(1000px) rotateY(20deg);
-    opacity:1;
+  100% {
+    opacity: 0;
+    transform: scaleY(0);
+  }
+}
+@keyframes slideOutX {
+  0% {
+    opacity: 1;
+    transform: scaleX(1);
   }
-
   100% {
-    transform: perspective(1000px) rotateY(-90deg);
     opacity: 0;
+    transform: scaleX(0);
   }
 }
 
+
+/*--------------
+     Swing
+---------------*/
+
 .transition.swing,
 .transition.swing.in,
 .transition.swing.in.down{
-  backface-visibility: visible !important;
-  transform-origin:top center;
+  transform-origin: top center;
   transition-timing-function: ease-in;
   animation-name: swingInX;
 }
 .transition.swing.in.up{
-  backface-visibility: visible !important;
   transform-origin:bottom center;
   transition-timing-function: ease-in;
   animation-name: swingInX;
 }
 .transition.swing.in.left{
-  backface-visibility: visible !important;
-  transform-origin:center right;
+  transform-origin: center right;
   transition-timing-function: ease-in;
   animation-name: swingInY;
 }
 .transition.swing.in.right{
-  backface-visibility: visible !important;
-  transform-origin:center left;
+  transform-origin: center left;
   transition-timing-function: ease-in;
   animation-name: swingInY;
 }
 
 .transition.swing.out.down,
 .transition.swing.out{
-  backface-visibility: visible !important;
-  transform-origin:top center;
+  transform-origin: top center;
   transition-timing-function: ease-in;
   animation-name: swingOutX;
 }
 .transition.swing.out.up{
-  backface-visibility: visible !important;
   transform-origin:bottom center;
   transition-timing-function: ease-in;
   animation-name: swingOutX;
 }
 .transition.swing.out.left{
-  backface-visibility: visible !important;
-  transform-origin:center right;
+  transform-origin: center right;
   transition-timing-function: ease-in;
   animation-name: swingOutY;
 }
 .transition.swing.out.right{
-  backface-visibility: visible !important;
-  transform-origin:center left;
+  transform-origin: center left;
   transition-timing-function: ease-in;
   animation-name: swingOutY;
 }
 
+@keyframes swingInX {
+  0% {
+    transform: perspective(1000px) rotateX(-90deg);
+    opacity: 0;
+  }
+  40% {
+    transform: perspective(1000px) rotateX(20deg);
+  }
+  60% {
+    transform: perspective(1000px) rotateX(-10deg);
+  }
+  80% {
+    transform: perspective(1000px) rotateX(5deg);
+    opacity: 1;
+  }
+  100% {
+    transform: perspective(1000px) rotateX(0deg);
+  }
+}
+@keyframes swingInY {
+  0% {
+    transform: perspective(1000px) rotateY(-90deg);
+    opacity: 0;
+  }
+  40% {
+    transform: perspective(1000px) rotateY(20deg);
+  }
+  60% {
+    transform: perspective(1000px) rotateY(-10deg);
+  }
+  80% {
+    transform: perspective(1000px) rotateY(5deg);
+    opacity: 1;
+  }
+  100% {
+    transform: perspective(1000px) rotateY(0deg);
+  }
+}
+@keyframes swingOutX {
+  0% {
+    transform: perspective(1000px) rotateX(0deg);
+  }
+  30% {
+    transform: perspective(1000px) rotateX(20deg);
+    opacity:1;
+  }
+  100% {
+    transform: perspective(1000px) rotateX(-90deg);
+    opacity: 0;
+  }
+}
+@keyframes swingOutY {
+  0% {
+    transform: perspective(1000px) rotateY(0deg);
+  }
+  30% {
+    transform: perspective(1000px) rotateY(20deg);
+    opacity:1;
+  }
+  100% {
+    transform: perspective(1000px) rotateY(-90deg);
+    opacity: 0;
+  }
+}