_animations.scss 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. // Slide up from the bottom, used for modals
  2. // -------------------------------
  3. .slide-in-up {
  4. @include translate3d(0, 100%, 0);
  5. }
  6. .slide-in-up.ng-enter,
  7. .slide-in-up > .ng-enter {
  8. @include transition(all cubic-bezier(.1, .7, .1, 1) 400ms);
  9. }
  10. .slide-in-up.ng-enter-active,
  11. .slide-in-up > .ng-enter-active {
  12. @include translate3d(0, 0, 0);
  13. }
  14. .slide-in-up.ng-leave,
  15. .slide-in-up > .ng-leave {
  16. @include transition(all ease-in-out 250ms);
  17. }
  18. // Scale Out
  19. // Scale from hero (1 in this case) to zero
  20. // -------------------------------
  21. @-webkit-keyframes scaleOut {
  22. from { -webkit-transform: scale(1); opacity: 1; }
  23. to { -webkit-transform: scale(0.8); opacity: 0; }
  24. }
  25. @keyframes scaleOut {
  26. from { transform: scale(1); opacity: 1; }
  27. to { transform: scale(0.8); opacity: 0; }
  28. }
  29. // Super Scale In
  30. // Scale from super (1.x) to duper (1 in this case)
  31. // -------------------------------
  32. @-webkit-keyframes superScaleIn {
  33. from { -webkit-transform: scale(1.2); opacity: 0; }
  34. to { -webkit-transform: scale(1); opacity: 1 }
  35. }
  36. @keyframes superScaleIn {
  37. from { transform: scale(1.2); opacity: 0; }
  38. to { transform: scale(1); opacity: 1; }
  39. }