fade.css 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  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 {
  9. -webkit-animation-duration: 0.3s;
  10. animation-duration: 0.3s;
  11. -webkit-animation-timing-function: linear;
  12. animation-timing-function: linear;
  13. -webkit-animation-fill-mode: backwards;
  14. animation-fill-mode: backwards;
  15. opacity: 1;
  16. }
  17. .am-fade.am-fade-add,
  18. .am-fade.ng-hide-remove,
  19. .am-fade.ng-move {
  20. -webkit-animation-name: fadeIn;
  21. animation-name: fadeIn;
  22. }
  23. .am-fade.am-fade-remove,
  24. .am-fade.ng-hide {
  25. -webkit-animation-name: fadeOut;
  26. animation-name: fadeOut;
  27. }
  28. .am-fade.ng-enter {
  29. visibility: hidden;
  30. -webkit-animation-name: fadeIn;
  31. animation-name: fadeIn;
  32. -webkit-animation-play-state: paused;
  33. animation-play-state: paused;
  34. }
  35. .am-fade.ng-enter.ng-enter-active {
  36. visibility: visible;
  37. -webkit-animation-play-state: running;
  38. animation-play-state: running;
  39. }
  40. .am-fade.ng-leave {
  41. -webkit-animation-name: fadeOut;
  42. animation-name: fadeOut;
  43. -webkit-animation-play-state: paused;
  44. animation-play-state: paused;
  45. }
  46. .am-fade.ng-leave.ng-leave-active {
  47. -webkit-animation-play-state: running;
  48. animation-play-state: running;
  49. }
  50. @-webkit-keyframes fadeIn {
  51. from {
  52. opacity: 0;
  53. }
  54. to {
  55. opacity: 1;
  56. }
  57. }
  58. @keyframes fadeIn {
  59. from {
  60. opacity: 0;
  61. }
  62. to {
  63. opacity: 1;
  64. }
  65. }
  66. @-webkit-keyframes fadeOut {
  67. from {
  68. opacity: 1;
  69. }
  70. to {
  71. opacity: 0;
  72. }
  73. }
  74. @keyframes fadeOut {
  75. from {
  76. opacity: 1;
  77. }
  78. to {
  79. opacity: 0;
  80. }
  81. }
  82. .tab-pane.am-fade.active-remove {
  83. display: none !important;
  84. }
  85. .tab-pane.am-fade.active-add {
  86. -webkit-animation-name: fadeIn;
  87. animation-name: fadeIn;
  88. }
  89. .modal-backdrop.am-fade,
  90. .aside-backdrop.am-fade {
  91. background: rgba(0, 0, 0, 0.5);
  92. -webkit-animation-duration: 0.15s;
  93. animation-duration: 0.15s;
  94. }
  95. .modal-backdrop.am-fade.ng-leave,
  96. .aside-backdrop.am-fade.ng-leave {
  97. -webkit-animation-delay: 0.3s;
  98. animation-delay: 0.3s;
  99. }