fade-and-scale.css 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. /**
  2. * angular-motion
  3. * @version v0.4.2 - 2015-09-23
  4. * @link https://github.com/mgcrea/angular-motion
  5. * @author Olivier Louvignes <olivier@mg-crea.com> (https://github.com/mgcrea)
  6. * @license MIT License, http://www.opensource.org/licenses/MIT
  7. */
  8. .am-fade-and-scale {
  9. -webkit-animation-duration: 0.3s;
  10. animation-duration: 0.3s;
  11. -webkit-animation-timing-function: ease-in-out;
  12. animation-timing-function: ease-in-out;
  13. -webkit-animation-fill-mode: backwards;
  14. animation-fill-mode: backwards;
  15. }
  16. .am-fade-and-scale.ng-enter,
  17. .am-fade-and-scale.am-fade-and-scale-add,
  18. .am-fade-and-scale.ng-hide-remove,
  19. .am-fade-and-scale.ng-move {
  20. -webkit-animation-name: fadeAndScaleIn;
  21. animation-name: fadeAndScaleIn;
  22. }
  23. .am-fade-and-scale.ng-leave,
  24. .am-fade-and-scale.am-fade-and-scale-remove,
  25. .am-fade-and-scale.ng-hide {
  26. -webkit-animation-name: fadeAndScaleOut;
  27. animation-name: fadeAndScaleOut;
  28. }
  29. .am-fade-and-scale.ng-enter {
  30. visibility: hidden;
  31. -webkit-animation-name: fadeAndScaleIn;
  32. animation-name: fadeAndScaleIn;
  33. -webkit-animation-play-state: paused;
  34. animation-play-state: paused;
  35. }
  36. .am-fade-and-scale.ng-enter.ng-enter-active {
  37. visibility: visible;
  38. -webkit-animation-play-state: running;
  39. animation-play-state: running;
  40. }
  41. .am-fade-and-scale.ng-leave {
  42. -webkit-animation-name: fadeAndScaleOut;
  43. animation-name: fadeAndScaleOut;
  44. -webkit-animation-play-state: paused;
  45. animation-play-state: paused;
  46. }
  47. .am-fade-and-scale.ng-leave.ng-leave-active {
  48. -webkit-animation-play-state: running;
  49. animation-play-state: running;
  50. }
  51. @-webkit-keyframes fadeAndScaleIn {
  52. from {
  53. opacity: 0;
  54. -webkit-transform: scale(0.7);
  55. transform: scale(0.7);
  56. }
  57. to {
  58. opacity: 1;
  59. }
  60. }
  61. @keyframes fadeAndScaleIn {
  62. from {
  63. opacity: 0;
  64. -webkit-transform: scale(0.7);
  65. transform: scale(0.7);
  66. }
  67. to {
  68. opacity: 1;
  69. }
  70. }
  71. @-webkit-keyframes fadeAndScaleOut {
  72. from {
  73. opacity: 1;
  74. }
  75. to {
  76. opacity: 0;
  77. -webkit-transform: scale(0.7);
  78. transform: scale(0.7);
  79. }
  80. }
  81. @keyframes fadeAndScaleOut {
  82. from {
  83. opacity: 1;
  84. }
  85. to {
  86. opacity: 0;
  87. -webkit-transform: scale(0.7);
  88. transform: scale(0.7);
  89. }
  90. }