angular-motion.css

/**
 * angular-motion
 * @version v0.3.2 - 2014-02-11
 * @link https://github.com/mgcrea/angular-motion
 * @author Olivier Louvignes <olivier@mg-crea.com>
 * @license MIT License, //www.opensource.org/licenses/MIT
 */
.am-fade-and-scale {
  -webkit-animation-duration: .3s;
          animation-duration: .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;
}.am-fade-and-scale.ng-enter.ng-enter-active {
  visibility: visible;
}.am-fade-and-scale.ng-leave {
  -webkit-animation-name: fadeAndScaleOut;
          animation-name: fadeAndScaleOut;
}@-webkit-keyframes fadeAndScaleIn {
  from {
    opacity: 0;
    -webkit-transform: scale(.7);
            transform: scale(.7);
  }to {
    opacity: 1;
  }
}@keyframes fadeAndScaleIn {
  from {
    opacity: 0;
    -webkit-transform: scale(.7);
            transform: scale(.7);
  }to {
    opacity: 1;
  }
}@-webkit-keyframes fadeAndScaleOut {
  from {
    opacity: 1;
  }to {
    opacity: 0;
    -webkit-transform: scale(.7);
            transform: scale(.7);
  }
}@keyframes fadeAndScaleOut {
  from {
    opacity: 1;
  }to {
    opacity: 0;
    -webkit-transform: scale(.7);
            transform: scale(.7);
  }
}.am-fade-and-slide-top {
  -webkit-animation-duration: .3s;
          animation-duration: .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;
}.am-fade-and-slide-top.ng-enter.ng-enter-active {
  visibility: visible;
}.am-fade-and-slide-top.ng-leave {
  -webkit-animation-name: fadeAndSlideToTop;
          animation-name: fadeAndSlideToTop;
}.am-fade-and-slide-right {
  -webkit-animation-duration: .3s;
          animation-duration: .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;
}.am-fade-and-slide-right.ng-enter.ng-enter-active {
  visibility: visible;
}.am-fade-and-slide-right.ng-leave {
  -webkit-animation-name: fadeAndSlideToRight;
          animation-name: fadeAndSlideToRight;
}.am-fade-and-slide-bottom {
  -webkit-animation-duration: .3s;
          animation-duration: .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-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-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-fade-and-slide-bottom.ng-enter {
  visibility: hidden;
  -webkit-animation-name: fadeAndSlideFromBottom;
          animation-name: fadeAndSlideFromBottom;
}.am-fade-and-slide-bottom.ng-enter.ng-enter-active {
  visibility: visible;
}.am-fade-and-slide-bottom.ng-leave {
  -webkit-animation-name: fadeAndSlideToBottom;
          animation-name: fadeAndSlideToBottom;
}.am-fade-and-slide-left {
  -webkit-animation-duration: .3s;
          animation-duration: .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-left.am-fade-and-slide-left-add,.am-fade-and-slide-left.ng-hide-remove,.am-fade-and-slide-left.ng-move {
  -webkit-animation-name: fadeAndSlideFromLeft;
          animation-name: fadeAndSlideFromLeft;

  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
}.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-fade-and-slide-left.ng-enter {
  visibility: hidden;
  -webkit-animation-name: fadeAndSlideFromLeft;
          animation-name: fadeAndSlideFromLeft;
}.am-fade-and-slide-left.ng-enter.ng-enter-active {
  visibility: visible;
}.am-fade-and-slide-left.ng-leave {
  -webkit-animation-name: fadeAndSlideToLeft;
          animation-name: fadeAndSlideToLeft;
}@-webkit-keyframes fadeAndSlideFromTop {
  from {
    opacity: 0;
    -webkit-transform: translateY(-20%);
            transform: translateY(-20%);
  }to {
    opacity: 1;
  }
}@keyframes fadeAndSlideFromTop {
  from {
    opacity: 0;
    -webkit-transform: translateY(-20%);
            transform: translateY(-20%);
  }to {
    opacity: 1;
  }
}@-webkit-keyframes fadeAndSlideToTop {
  from {
    opacity: 1;
  }to {
    opacity: 0;
    -webkit-transform: translateY(-20%);
            transform: translateY(-20%);
  }
}@keyframes fadeAndSlideToTop {
  from {
    opacity: 1;
  }to {
    opacity: 0;
    -webkit-transform: translateY(-20%);
            transform: translateY(-20%);
  }
}@-webkit-keyframes fadeAndSlideFromRight {
  from {
    opacity: 0;
    -webkit-transform: translateX(20%);
            transform: translateX(20%);
  }to {
    opacity: 1;
  }
}@keyframes fadeAndSlideFromRight {
  from {
    opacity: 0;
    -webkit-transform: translateX(20%);
            transform: translateX(20%);
  }to {
    opacity: 1;
  }
}@-webkit-keyframes fadeAndSlideToRight {
  from {
    opacity: 1;
  }to {
    opacity: 0;
    -webkit-transform: translateX(20%);
            transform: translateX(20%);
  }
}@keyframes fadeAndSlideToRight {
  from {
    opacity: 1;
  }to {
    opacity: 0;
    -webkit-transform: translateX(20%);
            transform: translateX(20%);
  }
}@-webkit-keyframes fadeAndSlideFromBottom {
  from {
    opacity: 0;
    -webkit-transform: translateY(20%);
            transform: translateY(20%);
  }to {
    opacity: 1;
  }
}@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%);
  }
}@keyframes fadeAndSlideToBottom {
  from {
    opacity: 1;
  }to {
    opacity: 0;
    -webkit-transform: translateY(20%);
            transform: translateY(20%);
  }
}@-webkit-keyframes fadeAndSlideFromLeft {
  from {
    opacity: 0;
    -webkit-transform: translateX(-20%);
            transform: translateX(-20%);
  }to {
    opacity: 1;
  }
}@keyframes fadeAndSlideFromLeft {
  from {
    opacity: 0;
    -webkit-transform: translateX(-20%);
            transform: translateX(-20%);
  }to {
    opacity: 1;
  }
}@-webkit-keyframes fadeAndSlideToLeft {
  from {
    opacity: 1;
  }to {
    opacity: 0;
    -webkit-transform: translateX(-20%);
            transform: translateX(-20%);
  }
}@keyframes fadeAndSlideToLeft {
  from {
    opacity: 1;
  }to {
    opacity: 0;
    -webkit-transform: translateX(-20%);
            transform: translateX(-20%);
  }
}.am-fade {
  opacity: 1;
  -webkit-animation-duration: .3s;
          animation-duration: .3s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;

  -webkit-animation-fill-mode: backwards;
          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-fade.am-fade-remove,.am-fade.ng-hide {
  -webkit-animation-name: fadeOut;
          animation-name: fadeOut;
}.am-fade.ng-enter {
  visibility: hidden;
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
}.am-fade.ng-enter.ng-enter-active {
  visibility: visible;
}.am-fade.ng-leave {
  -webkit-animation-name: fadeOut;
          animation-name: fadeOut;
}@-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;
  }
}.modal-backdrop.am-fade,.aside-backdrop.am-fade {
  background: rgba(0,0,0,.5);
  -webkit-animation-duration: .15s;
          animation-duration: .15s;
}.am-flip-x {
  -webkit-animation-duration: .4s;
          animation-duration: .4s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;

  -webkit-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-flip-x.am-flip-x-remove,.am-flip-x.ng-hide {
  -webkit-animation-name: flipOutX;
          animation-name: flipOutX;
}.am-flip-x.ng-enter {
  visibility: hidden;
  -webkit-animation-name: flipInXBounce;
          animation-name: flipInXBounce;
}.am-flip-x.ng-enter.ng-enter-active {
  visibility: visible;
}.am-flip-x.ng-leave {
  -webkit-animation-name: flipOutX;
          animation-name: flipOutX;
}.am-flip-x-linear {
  -webkit-animation-duration: .4s;
          animation-duration: .4s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;

  -webkit-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-flip-x-linear.am-flip-x-remove,.am-flip-x-linear.ng-hide {
  -webkit-animation-name: flipOutX;
          animation-name: flipOutX;
}.am-flip-x-linear.ng-enter {
  visibility: hidden;
  -webkit-animation-name: flipInX;
          animation-name: flipInX;
}.am-flip-x-linear.ng-enter.ng-enter-active {
  visibility: visible;
}.am-flip-x-linear.ng-leave {
  -webkit-animation-name: flipOutX;
          animation-name: flipOutX;
}@-webkit-keyframes flipInX {
  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);
  }
}@keyframes flipInX {
  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-keyframes flipInXBounce {
  from {
    opacity: 0;
    -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);
  }
}@keyframes flipInXBounce {
  from {
    opacity: 0;
    -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 flipOutX {
  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);
  }
}@keyframes flipOutX {
  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);
  }
}.am-slide-top {
  -webkit-animation-duration: .3s;
          animation-duration: .3s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;

  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
}.am-slide-top.am-fade-and-slide-top-add,.am-slide-top.ng-hide-remove,.am-slide-top.ng-move {
  -webkit-animation-name: slideFromTop;
          animation-name: slideFromTop;
}.am-slide-top.am-fade-and-slide-top-remove,.am-slide-top.ng-hide {
  -webkit-animation-name: slideToTop;
          animation-name: slideToTop;
}.am-slide-top.ng-enter {
  visibility: hidden;
  -webkit-animation-name: slideFromTop;
          animation-name: slideFromTop;
}.am-slide-top.ng-enter.ng-enter-active {
  visibility: visible;
}.am-slide-top.ng-leave {
  -webkit-animation-name: slideToTop;
          animation-name: slideToTop;
}.am-slide-right {
  -webkit-animation-duration: .3s;
          animation-duration: .3s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;

  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
}.am-slide-right.am-fade-and-slide-right-add,.am-slide-right.ng-hide-remove,.am-slide-right.ng-move {
  -webkit-animation-name: slideFromRight;
          animation-name: slideFromRight;
}.am-slide-right.am-fade-and-slide-right-remove,.am-slide-right.ng-hide {
  -webkit-animation-name: slideToRight;
          animation-name: slideToRight;
}.am-slide-right.ng-enter {
  visibility: hidden;
  -webkit-animation-name: slideFromRight;
          animation-name: slideFromRight;
}.am-slide-right.ng-enter.ng-enter-active {
  visibility: visible;
}.am-slide-right.ng-leave {
  -webkit-animation-name: slideToRight;
          animation-name: slideToRight;
}.am-slide-bottom {
  -webkit-animation-duration: .3s;
          animation-duration: .3s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;

  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
}.am-slide-bottom.am-fade-and-slide-bottom-add,.am-slide-bottom.ng-hide-remove,.am-slide-bottom.ng-move {
  -webkit-animation-name: slideFromBottom;
          animation-name: slideFromBottom;
}.am-slide-bottom.am-fade-and-slide-bottom-remove,.am-slide-bottom.ng-hide {
  -webkit-animation-name: slideToBottom;
          animation-name: slideToBottom;
}.am-slide-bottom.ng-enter {
  visibility: hidden;
  -webkit-animation-name: slideFromBottom;
          animation-name: slideFromBottom;
}.am-slide-bottom.ng-enter.ng-enter-active {
  visibility: visible;
}.am-slide-bottom.ng-leave {
  -webkit-animation-name: slideToBottom;
          animation-name: slideToBottom;
}.am-slide-left {
  -webkit-animation-duration: .3s;
          animation-duration: .3s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;

  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
}.am-slide-left.am-fade-and-slide-left-add,.am-slide-left.ng-hide-remove,.am-slide-left.ng-move {
  -webkit-animation-name: slideFromLeft;
          animation-name: slideFromLeft;
}.am-slide-left.am-fade-and-slide-left-remove,.am-slide-left.ng-hide {
  -webkit-animation-name: slideToLeft;
          animation-name: slideToLeft;
}.am-slide-left.ng-enter {
  visibility: hidden;
  -webkit-animation-name: slideFromLeft;
          animation-name: slideFromLeft;
}.am-slide-left.ng-enter.ng-enter-active {
  visibility: visible;
}.am-slide-left.ng-leave {
  -webkit-animation-name: slideToLeft;
          animation-name: slideToLeft;
}@-webkit-keyframes slideFromTop {
  from {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}@keyframes slideFromTop {
  from {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}@-webkit-keyframes slideToTop {
  to {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}@keyframes slideToTop {
  to {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}@-webkit-keyframes slideFromRight {
  from {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}@keyframes slideFromRight {
  from {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}@-webkit-keyframes slideToRight {
  to {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}@keyframes slideToRight {
  to {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}@-webkit-keyframes slideFromBottom {
  from {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}@keyframes slideFromBottom {
  from {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}@-webkit-keyframes slideToBottom {
  to {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}@keyframes slideToBottom {
  to {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}@-webkit-keyframes slideFromLeft {
  from {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}@keyframes slideFromLeft {
  from {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}@-webkit-keyframes slideToLeft {
  to {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}@keyframes slideToLeft {
  to {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}