Added 'swing' in and out transition

src/themes/default/modules/transition.overrides

@@ -799,14 +799,140 @@
   }
 }
 
+/*--------------
+      Swing
+---------------*/
+
+@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;
+  }
+}
 
+.transition.swing,
+.transition.swing.in,
+.transition.swing.in.down{
+  backface-visibility: visible !important;
+  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;
+  transition-timing-function: ease-in;
+  animation-name: swingInY;
+}
+.transition.swing.in.right{
+  backface-visibility: visible !important;
+  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;
+  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;
+  transition-timing-function: ease-in;
+  animation-name: swingOutY;
+}
+.transition.swing.out.right{
+  backface-visibility: visible !important;
+  transform-origin:center left;
+  transition-timing-function: ease-in;
+  animation-name: swingOutY;
+}