rails-angular-motion 0.3.4 → 0.4.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 309324a2917660105f183cc202a997f6353eb658
-  data.tar.gz: cec13eafabe254bf3997f07aa4052afa87e4710c
+  metadata.gz: aee97c6450845cd9f98451a940347ac0fb7c727a
+  data.tar.gz: cee3f5090a8fcf182e165d0d0b93171ee0cd1502
 SHA512:
-  metadata.gz: 4de063ce3a53d09f9047839a98557b53e41ccd05b6df0fefaf3f297c8e8a47d3e261683c7a81b67dcda1d7d71bf42f44f10d3d4e46ac45f579fb2d63afa22cae
-  data.tar.gz: 515f9e5c20658f6b10fd6ff7dd21228165cdd1dd099292c0daff26d3b5499119bd50f3045075caf6879aab45bb5573dcfcbd4199e15b2a23740861538d60af8c
+  metadata.gz: 1d7e67a703cf0718024d0908f78f6c485786f7b53b1f2d62d6abf9f8c01aa3ebff515edfdc95037177ca8cab9407dff5517cbff152f1a698a0187798a2431220
+  data.tar.gz: 03d6ae88b4faf9f1b4ce5b3f3619ea498a8f77a2058bc0f905febf451eeaea7ccdf40fb570f9a7fa0e9a6ec1f1015cc8d2badb5b8f3303effe63a8d8bf9d1b9a

data/README.md

@@ -18,4 +18,4 @@ If you desire to require minified version, add the following:
 
 ## Versioning
 
-Current version of Angular Motion - 0.3.4
+Current version of Angular Motion - 0.4.2

data/lib/rails-angular-motion/version.rb

@@ -1,3 +1,3 @@
 module RailsAngularMotion
-  VERSION = "0.3.4"
+  VERSION = "0.4.2"
 end

data/vendor/assets/stylesheets/angular-motion.css

@@ -1,51 +1,52 @@
 /**
  * angular-motion
- * @version v0.3.4 - 2014-10-14
+ * @version v0.4.2 - 2015-05-20
  * @link https://github.com/mgcrea/angular-motion
- * @author Olivier Louvignes <olivier@mg-crea.com>
+ * @author Olivier Louvignes <olivier@mg-crea.com> (https://github.com/mgcrea)
  * @license MIT License, http://www.opensource.org/licenses/MIT
  */
 .am-collapse {
   -webkit-animation-duration: 0.3s;
-  animation-duration: 0.3s;
+          animation-duration: 0.3s;
   -webkit-animation-timing-function: ease;
-  animation-timing-function: ease;
+          animation-timing-function: ease;
   -webkit-animation-fill-mode: backwards;
-  animation-fill-mode: backwards;
+          animation-fill-mode: backwards;
+  overflow: hidden;
   opacity: 1;
 }
 .am-collapse.am-collapse-add,
 .am-collapse.ng-hide-remove,
 .am-collapse.ng-move {
   -webkit-animation-name: expand;
-  animation-name: expand;
+          animation-name: expand;
 }
 .am-collapse.am-collapse-remove,
 .am-collapse.ng-hide {
   -webkit-animation-name: collapse;
-  animation-name: collapse;
+          animation-name: collapse;
 }
 .am-collapse.ng-enter {
   visibility: hidden;
   -webkit-animation-name: expand;
-  animation-name: expand;
+          animation-name: expand;
   -webkit-animation-play-state: paused;
-  animation-play-state: paused;
+          animation-play-state: paused;
 }
 .am-collapse.ng-enter.ng-enter-active {
   visibility: visible;
   -webkit-animation-play-state: running;
-  animation-play-state: running;
+          animation-play-state: running;
 }
 .am-collapse.ng-leave {
   -webkit-animation-name: collapse;
-  animation-name: collapse;
+          animation-name: collapse;
   -webkit-animation-play-state: paused;
-  animation-play-state: paused;
+          animation-play-state: paused;
 }
 .am-collapse.ng-leave.ng-leave-active {
   -webkit-animation-play-state: running;
-  animation-play-state: running;
+          animation-play-state: running;
 }
 @-webkit-keyframes expand {
   from {
@@ -81,946 +82,946 @@
 }
 .panel-collapse.am-collapse.in-remove {
   -webkit-animation-name: collapse;
-  animation-name: collapse;
+          animation-name: collapse;
   display: block;
 }
 .panel-collapse.am-collapse.in-add {
   -webkit-animation-name: expand;
-  animation-name: expand;
+          animation-name: expand;
 }
 
-.am-fade-and-scale {
+.am-fade {
   -webkit-animation-duration: 0.3s;
-  animation-duration: 0.3s;
-  -webkit-animation-timing-function: ease-in-out;
-  animation-timing-function: ease-in-out;
+          animation-duration: 0.3s;
+  -webkit-animation-timing-function: linear;
+          animation-timing-function: linear;
   -webkit-animation-fill-mode: backwards;
-  animation-fill-mode: backwards;
+          animation-fill-mode: backwards;
+  opacity: 1;
 }
-.am-fade-and-scale.ng-enter,
-.am-fade-and-scale.am-fade-and-scale-add,
-.am-fade-and-scale.ng-hide-remove,
-.am-fade-and-scale.ng-move {
-  -webkit-animation-name: fadeAndScaleIn;
-  animation-name: fadeAndScaleIn;
+.am-fade.am-fade-add,
+.am-fade.ng-hide-remove,
+.am-fade.ng-move {
+  -webkit-animation-name: fadeIn;
+          animation-name: fadeIn;
 }
-.am-fade-and-scale.ng-leave,
-.am-fade-and-scale.am-fade-and-scale-remove,
-.am-fade-and-scale.ng-hide {
-  -webkit-animation-name: fadeAndScaleOut;
-  animation-name: fadeAndScaleOut;
+.am-fade.am-fade-remove,
+.am-fade.ng-hide {
+  -webkit-animation-name: fadeOut;
+          animation-name: fadeOut;
 }
-.am-fade-and-scale.ng-enter {
+.am-fade.ng-enter {
   visibility: hidden;
-  -webkit-animation-name: fadeAndScaleIn;
-  animation-name: fadeAndScaleIn;
+  -webkit-animation-name: fadeIn;
+          animation-name: fadeIn;
   -webkit-animation-play-state: paused;
-  animation-play-state: paused;
+          animation-play-state: paused;
 }
-.am-fade-and-scale.ng-enter.ng-enter-active {
+.am-fade.ng-enter.ng-enter-active {
   visibility: visible;
   -webkit-animation-play-state: running;
-  animation-play-state: running;
+          animation-play-state: running;
 }
-.am-fade-and-scale.ng-leave {
-  -webkit-animation-name: fadeAndScaleOut;
-  animation-name: fadeAndScaleOut;
+.am-fade.ng-leave {
+  -webkit-animation-name: fadeOut;
+          animation-name: fadeOut;
   -webkit-animation-play-state: paused;
-  animation-play-state: paused;
+          animation-play-state: paused;
 }
-.am-fade-and-scale.ng-leave.ng-leave-active {
+.am-fade.ng-leave.ng-leave-active {
   -webkit-animation-play-state: running;
-  animation-play-state: running;
+          animation-play-state: running;
 }
-@-webkit-keyframes fadeAndScaleIn {
+@-webkit-keyframes fadeIn {
   from {
     opacity: 0;
-    -webkit-transform: scale(0.7);
-    transform: scale(0.7);
   }
   to {
     opacity: 1;
   }
 }
-@keyframes fadeAndScaleIn {
+@keyframes fadeIn {
   from {
     opacity: 0;
-    -webkit-transform: scale(0.7);
-    transform: scale(0.7);
   }
   to {
     opacity: 1;
   }
 }
-@-webkit-keyframes fadeAndScaleOut {
+@-webkit-keyframes fadeOut {
   from {
     opacity: 1;
   }
   to {
     opacity: 0;
-    -webkit-transform: scale(0.7);
-    transform: scale(0.7);
   }
 }
-@keyframes fadeAndScaleOut {
+@keyframes fadeOut {
   from {
     opacity: 1;
   }
   to {
     opacity: 0;
-    -webkit-transform: scale(0.7);
-    transform: scale(0.7);
   }
 }
-
-.am-fade-and-slide-top {
-  -webkit-animation-duration: 0.3s;
-  animation-duration: 0.3s;
-  -webkit-animation-timing-function: ease-in-out;
-  animation-timing-function: ease-in-out;
-  -webkit-animation-fill-mode: backwards;
-  animation-fill-mode: backwards;
-}
-.am-fade-and-slide-top.am-fade-and-slide-top-add,
-.am-fade-and-slide-top.ng-hide-remove,
-.am-fade-and-slide-top.ng-move {
-  -webkit-animation-name: fadeAndSlideFromTop;
-  animation-name: fadeAndSlideFromTop;
-}
-.am-fade-and-slide-top.am-fade-and-slide-top-remove,
-.am-fade-and-slide-top.ng-hide {
-  -webkit-animation-name: fadeAndSlideToTop;
-  animation-name: fadeAndSlideToTop;
-}
-.am-fade-and-slide-top.ng-enter {
-  visibility: hidden;
-  -webkit-animation-name: fadeAndSlideFromTop;
-  animation-name: fadeAndSlideFromTop;
-  -webkit-animation-play-state: paused;
-  animation-play-state: paused;
-}
-.am-fade-and-slide-top.ng-enter.ng-enter-active {
-  visibility: visible;
-  -webkit-animation-play-state: running;
-  animation-play-state: running;
-}
-.am-fade-and-slide-top.ng-leave {
-  -webkit-animation-name: fadeAndSlideToTop;
-  animation-name: fadeAndSlideToTop;
-  -webkit-animation-play-state: paused;
-  animation-play-state: paused;
-}
-.am-fade-and-slide-top.ng-leave.ng-leave-active {
-  -webkit-animation-play-state: running;
-  animation-play-state: running;
-}
-.am-fade-and-slide-right {
-  -webkit-animation-duration: 0.3s;
-  animation-duration: 0.3s;
-  -webkit-animation-timing-function: ease-in-out;
-  animation-timing-function: ease-in-out;
-  -webkit-animation-fill-mode: backwards;
-  animation-fill-mode: backwards;
-}
-.am-fade-and-slide-right.am-fade-and-slide-right-add,
-.am-fade-and-slide-right.ng-hide-remove,
-.am-fade-and-slide-right.ng-move {
-  -webkit-animation-name: fadeAndSlideFromRight;
-  animation-name: fadeAndSlideFromRight;
-}
-.am-fade-and-slide-right.am-fade-and-slide-right-remove,
-.am-fade-and-slide-right.ng-hide {
-  -webkit-animation-name: fadeAndSlideToRight;
-  animation-name: fadeAndSlideToRight;
-}
-.am-fade-and-slide-right.ng-enter {
-  visibility: hidden;
-  -webkit-animation-name: fadeAndSlideFromRight;
-  animation-name: fadeAndSlideFromRight;
-  -webkit-animation-play-state: paused;
-  animation-play-state: paused;
+.tab-pane.am-fade.active-remove {
+  display: none !important;
 }
-.am-fade-and-slide-right.ng-enter.ng-enter-active {
-  visibility: visible;
-  -webkit-animation-play-state: running;
-  animation-play-state: running;
+.tab-pane.am-fade.active-add {
+  -webkit-animation-name: fadeIn;
+          animation-name: fadeIn;
 }
-.am-fade-and-slide-right.ng-leave {
-  -webkit-animation-name: fadeAndSlideToRight;
-  animation-name: fadeAndSlideToRight;
-  -webkit-animation-play-state: paused;
-  animation-play-state: paused;
+.modal-backdrop.am-fade,
+.aside-backdrop.am-fade {
+  background: rgba(0, 0, 0, 0.5);
+  -webkit-animation-duration: 0.15s;
+          animation-duration: 0.15s;
 }
-.am-fade-and-slide-right.ng-leave.ng-leave-active {
-  -webkit-animation-play-state: running;
-  animation-play-state: running;
+.modal-backdrop.am-fade.ng-leave,
+.aside-backdrop.am-fade.ng-leave {
+  -webkit-animation-delay: 0.3s;
+          animation-delay: 0.3s;
 }
-.am-fade-and-slide-bottom {
-  -webkit-animation-duration: 0.3s;
-  animation-duration: 0.3s;
-  -webkit-animation-timing-function: ease-in-out;
-  animation-timing-function: ease-in-out;
+
+.am-flip-x {
+  -webkit-animation-duration: 0.4s;
+          animation-duration: 0.4s;
+  -webkit-animation-timing-function: ease;
+          animation-timing-function: ease;
   -webkit-animation-fill-mode: backwards;
-  animation-fill-mode: backwards;
+          animation-fill-mode: backwards;
 }
-.am-fade-and-slide-bottom.am-fade-and-slide-bottom-add,
-.am-fade-and-slide-bottom.ng-hide-remove,
-.am-fade-and-slide-bottom.ng-move {
-  -webkit-animation-name: fadeAndSlideFromBottom;
-  animation-name: fadeAndSlideFromBottom;
+.am-flip-x.am-flip-x-add,
+.am-flip-x.ng-hide-remove,
+.am-flip-x.ng-move {
+  -webkit-animation-name: flipInXBounce;
+          animation-name: flipInXBounce;
 }
-.am-fade-and-slide-bottom.am-fade-and-slide-bottom-remove,
-.am-fade-and-slide-bottom.ng-hide {
-  -webkit-animation-name: fadeAndSlideToBottom;
-  animation-name: fadeAndSlideToBottom;
+.am-flip-x.am-flip-x-remove,
+.am-flip-x.ng-hide {
+  -webkit-animation-name: flipOutX;
+          animation-name: flipOutX;
 }
-.am-fade-and-slide-bottom.ng-enter {
+.am-flip-x.ng-enter {
   visibility: hidden;
-  -webkit-animation-name: fadeAndSlideFromBottom;
-  animation-name: fadeAndSlideFromBottom;
+  -webkit-animation-name: flipInXBounce;
+          animation-name: flipInXBounce;
   -webkit-animation-play-state: paused;
-  animation-play-state: paused;
+          animation-play-state: paused;
 }
-.am-fade-and-slide-bottom.ng-enter.ng-enter-active {
+.am-flip-x.ng-enter.ng-enter-active {
   visibility: visible;
   -webkit-animation-play-state: running;
-  animation-play-state: running;
+          animation-play-state: running;
 }
-.am-fade-and-slide-bottom.ng-leave {
-  -webkit-animation-name: fadeAndSlideToBottom;
-  animation-name: fadeAndSlideToBottom;
+.am-flip-x.ng-leave {
+  -webkit-animation-name: flipOutX;
+          animation-name: flipOutX;
   -webkit-animation-play-state: paused;
-  animation-play-state: paused;
+          animation-play-state: paused;
 }
-.am-fade-and-slide-bottom.ng-leave.ng-leave-active {
+.am-flip-x.ng-leave.ng-leave-active {
   -webkit-animation-play-state: running;
-  animation-play-state: running;
+          animation-play-state: running;
 }
-.am-fade-and-slide-left {
-  -webkit-animation-duration: 0.3s;
-  animation-duration: 0.3s;
-  -webkit-animation-timing-function: ease-in-out;
-  animation-timing-function: ease-in-out;
+.am-flip-x-linear {
+  -webkit-animation-duration: 0.4s;
+          animation-duration: 0.4s;
+  -webkit-animation-timing-function: ease;
+          animation-timing-function: ease;
   -webkit-animation-fill-mode: backwards;
-  animation-fill-mode: backwards;
+          animation-fill-mode: backwards;
 }
-.am-fade-and-slide-left.am-fade-and-slide-left-add,
-.am-fade-and-slide-left.ng-hide-remove,
-.am-fade-and-slide-left.ng-move {
-  -webkit-animation-fill-mode: backwards;
-  animation-fill-mode: backwards;
-  -webkit-animation-name: fadeAndSlideFromLeft;
-  animation-name: fadeAndSlideFromLeft;
+.am-flip-x-linear.am-flip-x-add,
+.am-flip-x-linear.ng-hide-remove,
+.am-flip-x-linear.ng-move {
+  -webkit-animation-name: flipInX;
+          animation-name: flipInX;
 }
-.am-fade-and-slide-left.am-fade-and-slide-left-remove,
-.am-fade-and-slide-left.ng-hide {
-  -webkit-animation-name: fadeAndSlideToLeft;
-  animation-name: fadeAndSlideToLeft;
+.am-flip-x-linear.am-flip-x-remove,
+.am-flip-x-linear.ng-hide {
+  -webkit-animation-name: flipOutX;
+          animation-name: flipOutX;
 }
-.am-fade-and-slide-left.ng-enter {
+.am-flip-x-linear.ng-enter {
   visibility: hidden;
-  -webkit-animation-name: fadeAndSlideFromLeft;
-  animation-name: fadeAndSlideFromLeft;
+  -webkit-animation-name: flipInX;
+          animation-name: flipInX;
   -webkit-animation-play-state: paused;
-  animation-play-state: paused;
+          animation-play-state: paused;
 }
-.am-fade-and-slide-left.ng-enter.ng-enter-active {
+.am-flip-x-linear.ng-enter.ng-enter-active {
   visibility: visible;
   -webkit-animation-play-state: running;
-  animation-play-state: running;
+          animation-play-state: running;
 }
-.am-fade-and-slide-left.ng-leave {
-  -webkit-animation-name: fadeAndSlideToLeft;
-  animation-name: fadeAndSlideToLeft;
+.am-flip-x-linear.ng-leave {
+  -webkit-animation-name: flipOutX;
+          animation-name: flipOutX;
   -webkit-animation-play-state: paused;
-  animation-play-state: paused;
+          animation-play-state: paused;
 }
-.am-fade-and-slide-left.ng-leave.ng-leave-active {
+.am-flip-x-linear.ng-leave.ng-leave-active {
   -webkit-animation-play-state: running;
-  animation-play-state: running;
+          animation-play-state: running;
 }
-@-webkit-keyframes fadeAndSlideFromTop {
+@-webkit-keyframes flipInX {
   from {
     opacity: 0;
-    -webkit-transform: translateY(-20%);
-    transform: translateY(-20%);
+    -webkit-transform: perspective(400px) rotateX(90deg);
+            transform: perspective(400px) rotateX(90deg);
   }
   to {
     opacity: 1;
+    -webkit-transform: perspective(400px) rotateX(0deg);
+            transform: perspective(400px) rotateX(0deg);
   }
 }
-@keyframes fadeAndSlideFromTop {
+@keyframes flipInX {
   from {
     opacity: 0;
-    -webkit-transform: translateY(-20%);
-    transform: translateY(-20%);
+    -webkit-transform: perspective(400px) rotateX(90deg);
+            transform: perspective(400px) rotateX(90deg);
   }
   to {
     opacity: 1;
+    -webkit-transform: perspective(400px) rotateX(0deg);
+            transform: perspective(400px) rotateX(0deg);
   }
 }
-@-webkit-keyframes fadeAndSlideToTop {
+@-webkit-keyframes flipInXBounce {
   from {
-    opacity: 1;
-  }
-  to {
     opacity: 0;
-    -webkit-transform: translateY(-20%);
-    transform: translateY(-20%);
-  }
-}
-@keyframes fadeAndSlideToTop {
-  from {
-    opacity: 1;
+    -webkit-transform: perspective(400px) rotateX(90deg);
+            transform: perspective(400px) rotateX(90deg);
   }
-  to {
-    opacity: 0;
-    -webkit-transform: translateY(-20%);
-    transform: translateY(-20%);
+  40% {
+    -webkit-transform: perspective(400px) rotateX(-10deg);
+            transform: perspective(400px) rotateX(-10deg);
   }
-}
-@-webkit-keyframes fadeAndSlideFromRight {
-  from {
-    opacity: 0;
-    -webkit-transform: translateX(20%);
-    transform: translateX(20%);
+  70% {
+    -webkit-transform: perspective(400px) rotateX(10deg);
+            transform: perspective(400px) rotateX(10deg);
   }
   to {
     opacity: 1;
+    -webkit-transform: perspective(400px) rotateX(0deg);
+            transform: perspective(400px) rotateX(0deg);
   }
 }
-@keyframes fadeAndSlideFromRight {
+@keyframes flipInXBounce {
   from {
     opacity: 0;
-    -webkit-transform: translateX(20%);
-    transform: translateX(20%);
+    -webkit-transform: perspective(400px) rotateX(90deg);
+            transform: perspective(400px) rotateX(90deg);
+  }
+  40% {
+    -webkit-transform: perspective(400px) rotateX(-10deg);
+            transform: perspective(400px) rotateX(-10deg);
+  }
+  70% {
+    -webkit-transform: perspective(400px) rotateX(10deg);
+            transform: perspective(400px) rotateX(10deg);
   }
   to {
     opacity: 1;
+    -webkit-transform: perspective(400px) rotateX(0deg);
+            transform: perspective(400px) rotateX(0deg);
   }
 }
-@-webkit-keyframes fadeAndSlideToRight {
+@-webkit-keyframes flipOutX {
   from {
     opacity: 1;
+    -webkit-transform: perspective(400px) rotateX(0deg);
+            transform: perspective(400px) rotateX(0deg);
   }
   to {
     opacity: 0;
-    -webkit-transform: translateX(20%);
-    transform: translateX(20%);
+    -webkit-transform: perspective(400px) rotateX(90deg);
+            transform: perspective(400px) rotateX(90deg);
   }
 }
-@keyframes fadeAndSlideToRight {
+@keyframes flipOutX {
   from {
     opacity: 1;
+    -webkit-transform: perspective(400px) rotateX(0deg);
+            transform: perspective(400px) rotateX(0deg);
   }
   to {
     opacity: 0;
-    -webkit-transform: translateX(20%);
-    transform: translateX(20%);
+    -webkit-transform: perspective(400px) rotateX(90deg);
+            transform: perspective(400px) rotateX(90deg);
   }
 }
-@-webkit-keyframes fadeAndSlideFromBottom {
-  from {
-    opacity: 0;
-    -webkit-transform: translateY(20%);
-    transform: translateY(20%);
-  }
-  to {
-    opacity: 1;
-  }
+
+.am-slide-top {
+  -webkit-animation-duration: 0.3s;
+          animation-duration: 0.3s;
+  -webkit-animation-timing-function: ease-in-out;
+          animation-timing-function: ease-in-out;
+  -webkit-animation-fill-mode: backwards;
+          animation-fill-mode: backwards;
 }
-@keyframes fadeAndSlideFromBottom {
-  from {
-    opacity: 0;
-    -webkit-transform: translateY(20%);
-    transform: translateY(20%);
-  }
-  to {
-    opacity: 1;
-  }
-}
-@-webkit-keyframes fadeAndSlideToBottom {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: translateY(20%);
-    transform: translateY(20%);
-  }
+.am-slide-top.am-slide-top-add,
+.am-slide-top.ng-hide-remove,
+.am-slide-top.ng-move {
+  -webkit-animation-name: slideFromTop;
+          animation-name: slideFromTop;
 }
-@keyframes fadeAndSlideToBottom {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: translateY(20%);
-    transform: translateY(20%);
-  }
+.am-slide-top.am-slide-top-remove,
+.am-slide-top.ng-hide {
+  -webkit-animation-name: slideToTop;
+          animation-name: slideToTop;
 }
-@-webkit-keyframes fadeAndSlideFromLeft {
-  from {
-    opacity: 0;
-    -webkit-transform: translateX(-20%);
-    transform: translateX(-20%);
-  }
-  to {
-    opacity: 1;
-  }
+.am-slide-top.ng-enter {
+  visibility: hidden;
+  -webkit-animation-name: slideFromTop;
+          animation-name: slideFromTop;
+  -webkit-animation-play-state: paused;
+          animation-play-state: paused;
 }
-@keyframes fadeAndSlideFromLeft {
-  from {
-    opacity: 0;
-    -webkit-transform: translateX(-20%);
-    transform: translateX(-20%);
-  }
-  to {
-    opacity: 1;
-  }
+.am-slide-top.ng-enter.ng-enter-active {
+  visibility: visible;
+  -webkit-animation-play-state: running;
+          animation-play-state: running;
 }
-@-webkit-keyframes fadeAndSlideToLeft {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: translateX(-20%);
-    transform: translateX(-20%);
-  }
+.am-slide-top.ng-leave {
+  -webkit-animation-name: slideToTop;
+          animation-name: slideToTop;
+  -webkit-animation-play-state: paused;
+          animation-play-state: paused;
 }
-@keyframes fadeAndSlideToLeft {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: translateX(-20%);
-    transform: translateX(-20%);
-  }
+.am-slide-top.ng-leave.ng-leave-active {
+  -webkit-animation-play-state: running;
+          animation-play-state: running;
 }
-
-.am-fade {
+.am-slide-right {
   -webkit-animation-duration: 0.3s;
-  animation-duration: 0.3s;
-  -webkit-animation-timing-function: linear;
-  animation-timing-function: linear;
+          animation-duration: 0.3s;
+  -webkit-animation-timing-function: ease-in-out;
+          animation-timing-function: ease-in-out;
   -webkit-animation-fill-mode: backwards;
-  animation-fill-mode: backwards;
-  opacity: 1;
+          animation-fill-mode: backwards;
 }
-.am-fade.am-fade-add,
-.am-fade.ng-hide-remove,
-.am-fade.ng-move {
-  -webkit-animation-name: fadeIn;
-  animation-name: fadeIn;
+.am-slide-right.am-slide-right-add,
+.am-slide-right.ng-hide-remove,
+.am-slide-right.ng-move {
+  -webkit-animation-name: slideFromRight;
+          animation-name: slideFromRight;
 }
-.am-fade.am-fade-remove,
-.am-fade.ng-hide {
-  -webkit-animation-name: fadeOut;
-  animation-name: fadeOut;
+.am-slide-right.am-slide-right-remove,
+.am-slide-right.ng-hide {
+  -webkit-animation-name: slideToRight;
+          animation-name: slideToRight;
 }
-.am-fade.ng-enter {
+.am-slide-right.ng-enter {
   visibility: hidden;
-  -webkit-animation-name: fadeIn;
-  animation-name: fadeIn;
+  -webkit-animation-name: slideFromRight;
+          animation-name: slideFromRight;
   -webkit-animation-play-state: paused;
-  animation-play-state: paused;
+          animation-play-state: paused;
 }
-.am-fade.ng-enter.ng-enter-active {
+.am-slide-right.ng-enter.ng-enter-active {
   visibility: visible;
   -webkit-animation-play-state: running;
-  animation-play-state: running;
+          animation-play-state: running;
 }
-.am-fade.ng-leave {
-  -webkit-animation-name: fadeOut;
-  animation-name: fadeOut;
+.am-slide-right.ng-leave {
+  -webkit-animation-name: slideToRight;
+          animation-name: slideToRight;
   -webkit-animation-play-state: paused;
-  animation-play-state: paused;
+          animation-play-state: paused;
 }
-.am-fade.ng-leave.ng-leave-active {
+.am-slide-right.ng-leave.ng-leave-active {
   -webkit-animation-play-state: running;
-  animation-play-state: running;
-}
-@-webkit-keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@-webkit-keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-@keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-.tab-pane.am-fade.active-remove {
-  display: none !important;
+          animation-play-state: running;
 }
-.tab-pane.am-fade.active-add {
-  -webkit-animation-name: fadeIn;
-  animation-name: fadeIn;
-}
-.modal-backdrop.am-fade,
-.aside-backdrop.am-fade {
-  background: rgba(0, 0, 0, 0.5);
-  -webkit-animation-duration: 0.15s;
-  animation-duration: 0.15s;
-}
-.modal-backdrop.am-fade.ng-leave,
-.aside-backdrop.am-fade.ng-leave {
-  -webkit-animation-delay: 0.3s;
-  animation-delay: 0.3s;
-}
-
-.am-flip-x {
-  -webkit-animation-duration: 0.4s;
-  animation-duration: 0.4s;
-  -webkit-animation-timing-function: ease;
-  animation-timing-function: ease;
+.am-slide-bottom {
+  -webkit-animation-duration: 0.3s;
+          animation-duration: 0.3s;
+  -webkit-animation-timing-function: ease-in-out;
+          animation-timing-function: ease-in-out;
   -webkit-animation-fill-mode: backwards;
-  animation-fill-mode: backwards;
+          animation-fill-mode: backwards;
 }
-.am-flip-x.am-flip-x-add,
-.am-flip-x.ng-hide-remove,
-.am-flip-x.ng-move {
-  -webkit-animation-name: flipInXBounce;
-  animation-name: flipInXBounce;
+.am-slide-bottom.am-slide-bottom-add,
+.am-slide-bottom.ng-hide-remove,
+.am-slide-bottom.ng-move {
+  -webkit-animation-name: slideFromBottom;
+          animation-name: slideFromBottom;
 }
-.am-flip-x.am-flip-x-remove,
-.am-flip-x.ng-hide {
-  -webkit-animation-name: flipOutX;
-  animation-name: flipOutX;
+.am-slide-bottom.am-slide-bottom-remove,
+.am-slide-bottom.ng-hide {
+  -webkit-animation-name: slideToBottom;
+          animation-name: slideToBottom;
 }
-.am-flip-x.ng-enter {
+.am-slide-bottom.ng-enter {
   visibility: hidden;
-  -webkit-animation-name: flipInXBounce;
-  animation-name: flipInXBounce;
+  -webkit-animation-name: slideFromBottom;
+          animation-name: slideFromBottom;
   -webkit-animation-play-state: paused;
-  animation-play-state: paused;
+          animation-play-state: paused;
 }
-.am-flip-x.ng-enter.ng-enter-active {
+.am-slide-bottom.ng-enter.ng-enter-active {
   visibility: visible;
   -webkit-animation-play-state: running;
-  animation-play-state: running;
+          animation-play-state: running;
 }
-.am-flip-x.ng-leave {
-  -webkit-animation-name: flipOutX;
-  animation-name: flipOutX;
+.am-slide-bottom.ng-leave {
+  -webkit-animation-name: slideToBottom;
+          animation-name: slideToBottom;
   -webkit-animation-play-state: paused;
-  animation-play-state: paused;
+          animation-play-state: paused;
 }
-.am-flip-x.ng-leave.ng-leave-active {
+.am-slide-bottom.ng-leave.ng-leave-active {
   -webkit-animation-play-state: running;
-  animation-play-state: running;
+          animation-play-state: running;
 }
-.am-flip-x-linear {
-  -webkit-animation-duration: 0.4s;
-  animation-duration: 0.4s;
-  -webkit-animation-timing-function: ease;
-  animation-timing-function: ease;
+.am-slide-left {
+  -webkit-animation-duration: 0.3s;
+          animation-duration: 0.3s;
+  -webkit-animation-timing-function: ease-in-out;
+          animation-timing-function: ease-in-out;
   -webkit-animation-fill-mode: backwards;
-  animation-fill-mode: backwards;
+          animation-fill-mode: backwards;
 }
-.am-flip-x-linear.am-flip-x-add,
-.am-flip-x-linear.ng-hide-remove,
-.am-flip-x-linear.ng-move {
-  -webkit-animation-name: flipInX;
-  animation-name: flipInX;
+.am-slide-left.am-slide-left-add,
+.am-slide-left.ng-hide-remove,
+.am-slide-left.ng-move {
+  -webkit-animation-name: slideFromLeft;
+          animation-name: slideFromLeft;
 }
-.am-flip-x-linear.am-flip-x-remove,
-.am-flip-x-linear.ng-hide {
-  -webkit-animation-name: flipOutX;
-  animation-name: flipOutX;
+.am-slide-left.am-slide-left-remove,
+.am-slide-left.ng-hide {
+  -webkit-animation-name: slideToLeft;
+          animation-name: slideToLeft;
 }
-.am-flip-x-linear.ng-enter {
+.am-slide-left.ng-enter {
   visibility: hidden;
-  -webkit-animation-name: flipInX;
-  animation-name: flipInX;
+  -webkit-animation-name: slideFromLeft;
+          animation-name: slideFromLeft;
   -webkit-animation-play-state: paused;
-  animation-play-state: paused;
+          animation-play-state: paused;
 }
-.am-flip-x-linear.ng-enter.ng-enter-active {
+.am-slide-left.ng-enter.ng-enter-active {
   visibility: visible;
   -webkit-animation-play-state: running;
-  animation-play-state: running;
+          animation-play-state: running;
 }
-.am-flip-x-linear.ng-leave {
-  -webkit-animation-name: flipOutX;
-  animation-name: flipOutX;
+.am-slide-left.ng-leave {
+  -webkit-animation-name: slideToLeft;
+          animation-name: slideToLeft;
   -webkit-animation-play-state: paused;
-  animation-play-state: paused;
+          animation-play-state: paused;
 }
-.am-flip-x-linear.ng-leave.ng-leave-active {
+.am-slide-left.ng-leave.ng-leave-active {
   -webkit-animation-play-state: running;
-  animation-play-state: running;
+          animation-play-state: running;
 }
-@-webkit-keyframes flipInX {
+@-webkit-keyframes slideFromTop {
   from {
-    opacity: 0;
-    -webkit-transform: perspective(400px) rotateX(90deg);
-    transform: perspective(400px) rotateX(90deg);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: perspective(400px) rotateX(0deg);
-    transform: perspective(400px) rotateX(0deg);
+    -webkit-transform: translateY(-100%);
+            transform: translateY(-100%);
   }
 }
-@keyframes flipInX {
+@keyframes slideFromTop {
   from {
-    opacity: 0;
-    -webkit-transform: perspective(400px) rotateX(90deg);
-    transform: perspective(400px) rotateX(90deg);
+    -webkit-transform: translateY(-100%);
+            transform: translateY(-100%);
   }
+}
+@-webkit-keyframes slideToTop {
   to {
-    opacity: 1;
-    -webkit-transform: perspective(400px) rotateX(0deg);
-    transform: perspective(400px) rotateX(0deg);
+    -webkit-transform: translateY(-100%);
+            transform: translateY(-100%);
   }
 }
-@-webkit-keyframes flipInXBounce {
+@keyframes slideToTop {
+  to {
+    -webkit-transform: translateY(-100%);
+            transform: translateY(-100%);
+  }
+}
+@-webkit-keyframes slideFromRight {
   from {
-    opacity: 0;
-    -webkit-transform: perspective(400px) rotateX(90deg);
-    transform: perspective(400px) rotateX(90deg);
+    -webkit-transform: translateX(100%);
+            transform: translateX(100%);
   }
-  40% {
-    -webkit-transform: perspective(400px) rotateX(-10deg);
-    transform: perspective(400px) rotateX(-10deg);
+}
+@keyframes slideFromRight {
+  from {
+    -webkit-transform: translateX(100%);
+            transform: translateX(100%);
   }
-  70% {
-    -webkit-transform: perspective(400px) rotateX(10deg);
-    transform: perspective(400px) rotateX(10deg);
+}
+@-webkit-keyframes slideToRight {
+  to {
+    -webkit-transform: translateX(100%);
+            transform: translateX(100%);
   }
+}
+@keyframes slideToRight {
   to {
-    opacity: 1;
-    -webkit-transform: perspective(400px) rotateX(0deg);
-    transform: perspective(400px) rotateX(0deg);
+    -webkit-transform: translateX(100%);
+            transform: translateX(100%);
   }
 }
-@keyframes flipInXBounce {
+@-webkit-keyframes slideFromBottom {
   from {
-    opacity: 0;
-    -webkit-transform: perspective(400px) rotateX(90deg);
-    transform: perspective(400px) rotateX(90deg);
+    -webkit-transform: translateY(100%);
+            transform: translateY(100%);
   }
-  40% {
-    -webkit-transform: perspective(400px) rotateX(-10deg);
-    transform: perspective(400px) rotateX(-10deg);
+}
+@keyframes slideFromBottom {
+  from {
+    -webkit-transform: translateY(100%);
+            transform: translateY(100%);
   }
-  70% {
-    -webkit-transform: perspective(400px) rotateX(10deg);
-    transform: perspective(400px) rotateX(10deg);
+}
+@-webkit-keyframes slideToBottom {
+  to {
+    -webkit-transform: translateY(100%);
+            transform: translateY(100%);
   }
+}
+@keyframes slideToBottom {
   to {
-    opacity: 1;
-    -webkit-transform: perspective(400px) rotateX(0deg);
-    transform: perspective(400px) rotateX(0deg);
+    -webkit-transform: translateY(100%);
+            transform: translateY(100%);
   }
 }
-@-webkit-keyframes flipOutX {
+@-webkit-keyframes slideFromLeft {
   from {
-    opacity: 1;
-    -webkit-transform: perspective(400px) rotateX(0deg);
-    transform: perspective(400px) rotateX(0deg);
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: perspective(400px) rotateX(90deg);
-    transform: perspective(400px) rotateX(90deg);
+    -webkit-transform: translateX(-100%);
+            transform: translateX(-100%);
   }
 }
-@keyframes flipOutX {
+@keyframes slideFromLeft {
   from {
-    opacity: 1;
-    -webkit-transform: perspective(400px) rotateX(0deg);
-    transform: perspective(400px) rotateX(0deg);
+    -webkit-transform: translateX(-100%);
+            transform: translateX(-100%);
   }
+}
+@-webkit-keyframes slideToLeft {
   to {
-    opacity: 0;
-    -webkit-transform: perspective(400px) rotateX(90deg);
-    transform: perspective(400px) rotateX(90deg);
+    -webkit-transform: translateX(-100%);
+            transform: translateX(-100%);
+  }
+}
+@keyframes slideToLeft {
+  to {
+    -webkit-transform: translateX(-100%);
+            transform: translateX(-100%);
   }
 }
 
-.am-slide-top {
+.am-fade-and-slide-top {
   -webkit-animation-duration: 0.3s;
-  animation-duration: 0.3s;
+          animation-duration: 0.3s;
   -webkit-animation-timing-function: ease-in-out;
-  animation-timing-function: ease-in-out;
+          animation-timing-function: ease-in-out;
   -webkit-animation-fill-mode: backwards;
-  animation-fill-mode: backwards;
+          animation-fill-mode: backwards;
 }
-.am-slide-top.am-slide-top-add,
-.am-slide-top.ng-hide-remove,
-.am-slide-top.ng-move {
-  -webkit-animation-name: slideFromTop;
-  animation-name: slideFromTop;
+.am-fade-and-slide-top.am-fade-and-slide-top-add,
+.am-fade-and-slide-top.ng-hide-remove,
+.am-fade-and-slide-top.ng-move {
+  -webkit-animation-name: fadeAndSlideFromTop;
+          animation-name: fadeAndSlideFromTop;
 }
-.am-slide-top.am-slide-top-remove,
-.am-slide-top.ng-hide {
-  -webkit-animation-name: slideToTop;
-  animation-name: slideToTop;
+.am-fade-and-slide-top.am-fade-and-slide-top-remove,
+.am-fade-and-slide-top.ng-hide {
+  -webkit-animation-name: fadeAndSlideToTop;
+          animation-name: fadeAndSlideToTop;
 }
-.am-slide-top.ng-enter {
+.am-fade-and-slide-top.ng-enter {
   visibility: hidden;
-  -webkit-animation-name: slideFromTop;
-  animation-name: slideFromTop;
+  -webkit-animation-name: fadeAndSlideFromTop;
+          animation-name: fadeAndSlideFromTop;
   -webkit-animation-play-state: paused;
-  animation-play-state: paused;
+          animation-play-state: paused;
 }
-.am-slide-top.ng-enter.ng-enter-active {
+.am-fade-and-slide-top.ng-enter.ng-enter-active {
   visibility: visible;
   -webkit-animation-play-state: running;
-  animation-play-state: running;
+          animation-play-state: running;
 }
-.am-slide-top.ng-leave {
-  -webkit-animation-name: slideToTop;
-  animation-name: slideToTop;
+.am-fade-and-slide-top.ng-leave {
+  -webkit-animation-name: fadeAndSlideToTop;
+          animation-name: fadeAndSlideToTop;
   -webkit-animation-play-state: paused;
-  animation-play-state: paused;
+          animation-play-state: paused;
 }
-.am-slide-top.ng-leave.ng-leave-active {
+.am-fade-and-slide-top.ng-leave.ng-leave-active {
   -webkit-animation-play-state: running;
-  animation-play-state: running;
+          animation-play-state: running;
 }
-.am-slide-right {
+.am-fade-and-slide-right {
   -webkit-animation-duration: 0.3s;
-  animation-duration: 0.3s;
+          animation-duration: 0.3s;
   -webkit-animation-timing-function: ease-in-out;
-  animation-timing-function: ease-in-out;
+          animation-timing-function: ease-in-out;
   -webkit-animation-fill-mode: backwards;
-  animation-fill-mode: backwards;
+          animation-fill-mode: backwards;
 }
-.am-slide-right.am-slide-right-add,
-.am-slide-right.ng-hide-remove,
-.am-slide-right.ng-move {
-  -webkit-animation-name: slideFromRight;
-  animation-name: slideFromRight;
+.am-fade-and-slide-right.am-fade-and-slide-right-add,
+.am-fade-and-slide-right.ng-hide-remove,
+.am-fade-and-slide-right.ng-move {
+  -webkit-animation-name: fadeAndSlideFromRight;
+          animation-name: fadeAndSlideFromRight;
 }
-.am-slide-right.am-slide-right-remove,
-.am-slide-right.ng-hide {
-  -webkit-animation-name: slideToRight;
-  animation-name: slideToRight;
+.am-fade-and-slide-right.am-fade-and-slide-right-remove,
+.am-fade-and-slide-right.ng-hide {
+  -webkit-animation-name: fadeAndSlideToRight;
+          animation-name: fadeAndSlideToRight;
 }
-.am-slide-right.ng-enter {
+.am-fade-and-slide-right.ng-enter {
   visibility: hidden;
-  -webkit-animation-name: slideFromRight;
-  animation-name: slideFromRight;
+  -webkit-animation-name: fadeAndSlideFromRight;
+          animation-name: fadeAndSlideFromRight;
   -webkit-animation-play-state: paused;
-  animation-play-state: paused;
+          animation-play-state: paused;
 }
-.am-slide-right.ng-enter.ng-enter-active {
+.am-fade-and-slide-right.ng-enter.ng-enter-active {
   visibility: visible;
   -webkit-animation-play-state: running;
-  animation-play-state: running;
+          animation-play-state: running;
 }
-.am-slide-right.ng-leave {
-  -webkit-animation-name: slideToRight;
-  animation-name: slideToRight;
+.am-fade-and-slide-right.ng-leave {
+  -webkit-animation-name: fadeAndSlideToRight;
+          animation-name: fadeAndSlideToRight;
   -webkit-animation-play-state: paused;
-  animation-play-state: paused;
+          animation-play-state: paused;
 }
-.am-slide-right.ng-leave.ng-leave-active {
+.am-fade-and-slide-right.ng-leave.ng-leave-active {
   -webkit-animation-play-state: running;
-  animation-play-state: running;
+          animation-play-state: running;
 }
-.am-slide-bottom {
+.am-fade-and-slide-bottom {
   -webkit-animation-duration: 0.3s;
-  animation-duration: 0.3s;
+          animation-duration: 0.3s;
   -webkit-animation-timing-function: ease-in-out;
-  animation-timing-function: ease-in-out;
+          animation-timing-function: ease-in-out;
   -webkit-animation-fill-mode: backwards;
-  animation-fill-mode: backwards;
+          animation-fill-mode: backwards;
 }
-.am-slide-bottom.am-slide-bottom-add,
-.am-slide-bottom.ng-hide-remove,
-.am-slide-bottom.ng-move {
-  -webkit-animation-name: slideFromBottom;
-  animation-name: slideFromBottom;
+.am-fade-and-slide-bottom.am-fade-and-slide-bottom-add,
+.am-fade-and-slide-bottom.ng-hide-remove,
+.am-fade-and-slide-bottom.ng-move {
+  -webkit-animation-name: fadeAndSlideFromBottom;
+          animation-name: fadeAndSlideFromBottom;
 }
-.am-slide-bottom.am-slide-bottom-remove,
-.am-slide-bottom.ng-hide {
-  -webkit-animation-name: slideToBottom;
-  animation-name: slideToBottom;
+.am-fade-and-slide-bottom.am-fade-and-slide-bottom-remove,
+.am-fade-and-slide-bottom.ng-hide {
+  -webkit-animation-name: fadeAndSlideToBottom;
+          animation-name: fadeAndSlideToBottom;
 }
-.am-slide-bottom.ng-enter {
+.am-fade-and-slide-bottom.ng-enter {
   visibility: hidden;
-  -webkit-animation-name: slideFromBottom;
-  animation-name: slideFromBottom;
+  -webkit-animation-name: fadeAndSlideFromBottom;
+          animation-name: fadeAndSlideFromBottom;
   -webkit-animation-play-state: paused;
-  animation-play-state: paused;
+          animation-play-state: paused;
 }
-.am-slide-bottom.ng-enter.ng-enter-active {
+.am-fade-and-slide-bottom.ng-enter.ng-enter-active {
   visibility: visible;
   -webkit-animation-play-state: running;
-  animation-play-state: running;
+          animation-play-state: running;
 }
-.am-slide-bottom.ng-leave {
-  -webkit-animation-name: slideToBottom;
-  animation-name: slideToBottom;
+.am-fade-and-slide-bottom.ng-leave {
+  -webkit-animation-name: fadeAndSlideToBottom;
+          animation-name: fadeAndSlideToBottom;
   -webkit-animation-play-state: paused;
-  animation-play-state: paused;
+          animation-play-state: paused;
 }
-.am-slide-bottom.ng-leave.ng-leave-active {
+.am-fade-and-slide-bottom.ng-leave.ng-leave-active {
   -webkit-animation-play-state: running;
-  animation-play-state: running;
+          animation-play-state: running;
 }
-.am-slide-left {
+.am-fade-and-slide-left {
   -webkit-animation-duration: 0.3s;
-  animation-duration: 0.3s;
+          animation-duration: 0.3s;
   -webkit-animation-timing-function: ease-in-out;
-  animation-timing-function: ease-in-out;
+          animation-timing-function: ease-in-out;
   -webkit-animation-fill-mode: backwards;
-  animation-fill-mode: backwards;
+          animation-fill-mode: backwards;
 }
-.am-slide-left.am-slide-left-add,
-.am-slide-left.ng-hide-remove,
-.am-slide-left.ng-move {
-  -webkit-animation-name: slideFromLeft;
-  animation-name: slideFromLeft;
+.am-fade-and-slide-left.am-fade-and-slide-left-add,
+.am-fade-and-slide-left.ng-hide-remove,
+.am-fade-and-slide-left.ng-move {
+  -webkit-animation-fill-mode: backwards;
+          animation-fill-mode: backwards;
+  -webkit-animation-name: fadeAndSlideFromLeft;
+          animation-name: fadeAndSlideFromLeft;
 }
-.am-slide-left.am-slide-left-remove,
-.am-slide-left.ng-hide {
-  -webkit-animation-name: slideToLeft;
-  animation-name: slideToLeft;
+.am-fade-and-slide-left.am-fade-and-slide-left-remove,
+.am-fade-and-slide-left.ng-hide {
+  -webkit-animation-name: fadeAndSlideToLeft;
+          animation-name: fadeAndSlideToLeft;
 }
-.am-slide-left.ng-enter {
+.am-fade-and-slide-left.ng-enter {
   visibility: hidden;
-  -webkit-animation-name: slideFromLeft;
-  animation-name: slideFromLeft;
+  -webkit-animation-name: fadeAndSlideFromLeft;
+          animation-name: fadeAndSlideFromLeft;
   -webkit-animation-play-state: paused;
-  animation-play-state: paused;
+          animation-play-state: paused;
 }
-.am-slide-left.ng-enter.ng-enter-active {
+.am-fade-and-slide-left.ng-enter.ng-enter-active {
   visibility: visible;
   -webkit-animation-play-state: running;
-  animation-play-state: running;
+          animation-play-state: running;
 }
-.am-slide-left.ng-leave {
-  -webkit-animation-name: slideToLeft;
-  animation-name: slideToLeft;
+.am-fade-and-slide-left.ng-leave {
+  -webkit-animation-name: fadeAndSlideToLeft;
+          animation-name: fadeAndSlideToLeft;
   -webkit-animation-play-state: paused;
-  animation-play-state: paused;
+          animation-play-state: paused;
 }
-.am-slide-left.ng-leave.ng-leave-active {
+.am-fade-and-slide-left.ng-leave.ng-leave-active {
   -webkit-animation-play-state: running;
-  animation-play-state: running;
+          animation-play-state: running;
 }
-@-webkit-keyframes slideFromTop {
+@-webkit-keyframes fadeAndSlideFromTop {
   from {
-    -webkit-transform: translateY(-100%);
-    transform: translateY(-100%);
+    opacity: 0;
+    -webkit-transform: translateY(-20%);
+            transform: translateY(-20%);
+  }
+  to {
+    opacity: 1;
   }
 }
-@keyframes slideFromTop {
+@keyframes fadeAndSlideFromTop {
   from {
-    -webkit-transform: translateY(-100%);
-    transform: translateY(-100%);
+    opacity: 0;
+    -webkit-transform: translateY(-20%);
+            transform: translateY(-20%);
+  }
+  to {
+    opacity: 1;
   }
 }
-@-webkit-keyframes slideToTop {
+@-webkit-keyframes fadeAndSlideToTop {
+  from {
+    opacity: 1;
+  }
   to {
-    -webkit-transform: translateY(-100%);
-    transform: translateY(-100%);
+    opacity: 0;
+    -webkit-transform: translateY(-20%);
+            transform: translateY(-20%);
   }
 }
-@keyframes slideToTop {
+@keyframes fadeAndSlideToTop {
+  from {
+    opacity: 1;
+  }
   to {
-    -webkit-transform: translateY(-100%);
-    transform: translateY(-100%);
+    opacity: 0;
+    -webkit-transform: translateY(-20%);
+            transform: translateY(-20%);
   }
 }
-@-webkit-keyframes slideFromRight {
+@-webkit-keyframes fadeAndSlideFromRight {
   from {
-    -webkit-transform: translateX(100%);
-    transform: translateX(100%);
+    opacity: 0;
+    -webkit-transform: translateX(20%);
+            transform: translateX(20%);
+  }
+  to {
+    opacity: 1;
   }
 }
-@keyframes slideFromRight {
+@keyframes fadeAndSlideFromRight {
   from {
-    -webkit-transform: translateX(100%);
-    transform: translateX(100%);
+    opacity: 0;
+    -webkit-transform: translateX(20%);
+            transform: translateX(20%);
+  }
+  to {
+    opacity: 1;
   }
 }
-@-webkit-keyframes slideToRight {
+@-webkit-keyframes fadeAndSlideToRight {
+  from {
+    opacity: 1;
+  }
   to {
-    -webkit-transform: translateX(100%);
-    transform: translateX(100%);
+    opacity: 0;
+    -webkit-transform: translateX(20%);
+            transform: translateX(20%);
   }
 }
-@keyframes slideToRight {
+@keyframes fadeAndSlideToRight {
+  from {
+    opacity: 1;
+  }
   to {
-    -webkit-transform: translateX(100%);
-    transform: translateX(100%);
+    opacity: 0;
+    -webkit-transform: translateX(20%);
+            transform: translateX(20%);
   }
 }
-@-webkit-keyframes slideFromBottom {
+@-webkit-keyframes fadeAndSlideFromBottom {
   from {
-    -webkit-transform: translateY(100%);
-    transform: translateY(100%);
+    opacity: 0;
+    -webkit-transform: translateY(20%);
+            transform: translateY(20%);
+  }
+  to {
+    opacity: 1;
   }
 }
-@keyframes slideFromBottom {
+@keyframes fadeAndSlideFromBottom {
   from {
-    -webkit-transform: translateY(100%);
-    transform: translateY(100%);
+    opacity: 0;
+    -webkit-transform: translateY(20%);
+            transform: translateY(20%);
+  }
+  to {
+    opacity: 1;
   }
 }
-@-webkit-keyframes slideToBottom {
+@-webkit-keyframes fadeAndSlideToBottom {
+  from {
+    opacity: 1;
+  }
   to {
-    -webkit-transform: translateY(100%);
-    transform: translateY(100%);
+    opacity: 0;
+    -webkit-transform: translateY(20%);
+            transform: translateY(20%);
   }
 }
-@keyframes slideToBottom {
+@keyframes fadeAndSlideToBottom {
+  from {
+    opacity: 1;
+  }
   to {
-    -webkit-transform: translateY(100%);
-    transform: translateY(100%);
+    opacity: 0;
+    -webkit-transform: translateY(20%);
+            transform: translateY(20%);
   }
 }
-@-webkit-keyframes slideFromLeft {
+@-webkit-keyframes fadeAndSlideFromLeft {
   from {
-    -webkit-transform: translateX(-100%);
-    transform: translateX(-100%);
+    opacity: 0;
+    -webkit-transform: translateX(-20%);
+            transform: translateX(-20%);
+  }
+  to {
+    opacity: 1;
   }
 }
-@keyframes slideFromLeft {
+@keyframes fadeAndSlideFromLeft {
   from {
-    -webkit-transform: translateX(-100%);
-    transform: translateX(-100%);
+    opacity: 0;
+    -webkit-transform: translateX(-20%);
+            transform: translateX(-20%);
+  }
+  to {
+    opacity: 1;
   }
 }
-@-webkit-keyframes slideToLeft {
+@-webkit-keyframes fadeAndSlideToLeft {
+  from {
+    opacity: 1;
+  }
   to {
-    -webkit-transform: translateX(-100%);
-    transform: translateX(-100%);
+    opacity: 0;
+    -webkit-transform: translateX(-20%);
+            transform: translateX(-20%);
   }
 }
-@keyframes slideToLeft {
+@keyframes fadeAndSlideToLeft {
+  from {
+    opacity: 1;
+  }
   to {
-    -webkit-transform: translateX(-100%);
-    transform: translateX(-100%);
+    opacity: 0;
+    -webkit-transform: translateX(-20%);
+            transform: translateX(-20%);
+  }
+}
+
+.am-fade-and-scale {
+  -webkit-animation-duration: 0.3s;
+          animation-duration: 0.3s;
+  -webkit-animation-timing-function: ease-in-out;
+          animation-timing-function: ease-in-out;
+  -webkit-animation-fill-mode: backwards;
+          animation-fill-mode: backwards;
+}
+.am-fade-and-scale.ng-enter,
+.am-fade-and-scale.am-fade-and-scale-add,
+.am-fade-and-scale.ng-hide-remove,
+.am-fade-and-scale.ng-move {
+  -webkit-animation-name: fadeAndScaleIn;
+          animation-name: fadeAndScaleIn;
+}
+.am-fade-and-scale.ng-leave,
+.am-fade-and-scale.am-fade-and-scale-remove,
+.am-fade-and-scale.ng-hide {
+  -webkit-animation-name: fadeAndScaleOut;
+          animation-name: fadeAndScaleOut;
+}
+.am-fade-and-scale.ng-enter {
+  visibility: hidden;
+  -webkit-animation-name: fadeAndScaleIn;
+          animation-name: fadeAndScaleIn;
+  -webkit-animation-play-state: paused;
+          animation-play-state: paused;
+}
+.am-fade-and-scale.ng-enter.ng-enter-active {
+  visibility: visible;
+  -webkit-animation-play-state: running;
+          animation-play-state: running;
+}
+.am-fade-and-scale.ng-leave {
+  -webkit-animation-name: fadeAndScaleOut;
+          animation-name: fadeAndScaleOut;
+  -webkit-animation-play-state: paused;
+          animation-play-state: paused;
+}
+.am-fade-and-scale.ng-leave.ng-leave-active {
+  -webkit-animation-play-state: running;
+          animation-play-state: running;
+}
+@-webkit-keyframes fadeAndScaleIn {
+  from {
+    opacity: 0;
+    -webkit-transform: scale(0.7);
+            transform: scale(0.7);
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fadeAndScaleIn {
+  from {
+    opacity: 0;
+    -webkit-transform: scale(0.7);
+            transform: scale(0.7);
+  }
+  to {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes fadeAndScaleOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    -webkit-transform: scale(0.7);
+            transform: scale(0.7);
+  }
+}
+@keyframes fadeAndScaleOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    -webkit-transform: scale(0.7);
+            transform: scale(0.7);
   }
 }