mCordPortal/src/sass/animation.scss

/* animations
  -------------------------------------------------- */

  @keyframes slideOutRight {
    from {
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }

    to {
      opacity: 0;
      transform: translate3d(100%, 0, 0);
    }
  }

  @keyframes slideInRight {
    from {
      transform: translate3d(100%, 0, 0);
      opacity: 0;
    }

    to {
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }

@keyframes fadein {
  from {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }
  50% {
    transform: scale3d(1, 1, 1);
  }
  to   { opacity: 1; }
}


/* ng-view-animation
-------------------------------------------------- */
.fade {
  opacity: 1;
}
.fade.ng-enter,
.fade.ng-leave {
  transition: all .5s ease-in-out;
}
.fade.ng-enter {
  opacity: 0;
}
.fade.ng-enter-active {
  opacity: 1;
}
.fade.ng-leave {
  opacity: 1;
}
.fade.ng-leave-active {
  opacity: 0;
}

  /* ng-show-animation
  -------------------------------------------------- */

  .animate.ng-hide-add {
    animation:0.5s slideOutRight ease-in-out;
  }
  .animate.ng-hide-remove {
    animation:0.5s slideInRight ease-in-out;
  }

  /* ng-repeat-animation
  -------------------------------------------------- */
  .animate-repeat.ng-move,
  .animate-repeat.ng-enter,
  .animate-repeat.ng-leave {
    transition:all linear 0.5s;
  }

  .animate-repeat.ng-leave.ng-leave-active,
  .animate-repeat.ng-move,
  .animate-repeat.ng-enter {
    opacity:0;
    animation: 0.5s slideOutRight ease-in-out;
  }

  .animate-repeat.ng-leave,
  .animate-repeat.ng-move.ng-move-active,
  .animate-repeat.ng-enter.ng-enter-active {
    opacity:1;
    height:60px;
    animation: 0.5s slideInRight ease-in-out;
  }

  .animate-repeat.ng-enter-stagger,
  .animate-repeat.ng-leave-stagger{
    transition-delay: 0.1s;
    animation-delay: 0.1s;
  }