flip.css 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  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-flip-x {
  9. -webkit-animation-duration: 0.4s;
  10. animation-duration: 0.4s;
  11. -webkit-animation-timing-function: ease;
  12. animation-timing-function: ease;
  13. -webkit-animation-fill-mode: backwards;
  14. animation-fill-mode: backwards;
  15. }
  16. .am-flip-x.am-flip-x-add,
  17. .am-flip-x.ng-hide-remove,
  18. .am-flip-x.ng-move {
  19. -webkit-animation-name: flipInXBounce;
  20. animation-name: flipInXBounce;
  21. }
  22. .am-flip-x.am-flip-x-remove,
  23. .am-flip-x.ng-hide {
  24. -webkit-animation-name: flipOutX;
  25. animation-name: flipOutX;
  26. }
  27. .am-flip-x.ng-enter {
  28. visibility: hidden;
  29. -webkit-animation-name: flipInXBounce;
  30. animation-name: flipInXBounce;
  31. -webkit-animation-play-state: paused;
  32. animation-play-state: paused;
  33. }
  34. .am-flip-x.ng-enter.ng-enter-active {
  35. visibility: visible;
  36. -webkit-animation-play-state: running;
  37. animation-play-state: running;
  38. }
  39. .am-flip-x.ng-leave {
  40. -webkit-animation-name: flipOutX;
  41. animation-name: flipOutX;
  42. -webkit-animation-play-state: paused;
  43. animation-play-state: paused;
  44. }
  45. .am-flip-x.ng-leave.ng-leave-active {
  46. -webkit-animation-play-state: running;
  47. animation-play-state: running;
  48. }
  49. .am-flip-x-linear {
  50. -webkit-animation-duration: 0.4s;
  51. animation-duration: 0.4s;
  52. -webkit-animation-timing-function: ease;
  53. animation-timing-function: ease;
  54. -webkit-animation-fill-mode: backwards;
  55. animation-fill-mode: backwards;
  56. }
  57. .am-flip-x-linear.am-flip-x-add,
  58. .am-flip-x-linear.ng-hide-remove,
  59. .am-flip-x-linear.ng-move {
  60. -webkit-animation-name: flipInX;
  61. animation-name: flipInX;
  62. }
  63. .am-flip-x-linear.am-flip-x-remove,
  64. .am-flip-x-linear.ng-hide {
  65. -webkit-animation-name: flipOutX;
  66. animation-name: flipOutX;
  67. }
  68. .am-flip-x-linear.ng-enter {
  69. visibility: hidden;
  70. -webkit-animation-name: flipInX;
  71. animation-name: flipInX;
  72. -webkit-animation-play-state: paused;
  73. animation-play-state: paused;
  74. }
  75. .am-flip-x-linear.ng-enter.ng-enter-active {
  76. visibility: visible;
  77. -webkit-animation-play-state: running;
  78. animation-play-state: running;
  79. }
  80. .am-flip-x-linear.ng-leave {
  81. -webkit-animation-name: flipOutX;
  82. animation-name: flipOutX;
  83. -webkit-animation-play-state: paused;
  84. animation-play-state: paused;
  85. }
  86. .am-flip-x-linear.ng-leave.ng-leave-active {
  87. -webkit-animation-play-state: running;
  88. animation-play-state: running;
  89. }
  90. @-webkit-keyframes flipInX {
  91. from {
  92. opacity: 0;
  93. -webkit-transform: perspective(400px) rotateX(90deg);
  94. transform: perspective(400px) rotateX(90deg);
  95. }
  96. to {
  97. opacity: 1;
  98. -webkit-transform: perspective(400px) rotateX(0deg);
  99. transform: perspective(400px) rotateX(0deg);
  100. }
  101. }
  102. @keyframes flipInX {
  103. from {
  104. opacity: 0;
  105. -webkit-transform: perspective(400px) rotateX(90deg);
  106. transform: perspective(400px) rotateX(90deg);
  107. }
  108. to {
  109. opacity: 1;
  110. -webkit-transform: perspective(400px) rotateX(0deg);
  111. transform: perspective(400px) rotateX(0deg);
  112. }
  113. }
  114. @-webkit-keyframes flipInXBounce {
  115. from {
  116. opacity: 0;
  117. -webkit-transform: perspective(400px) rotateX(90deg);
  118. transform: perspective(400px) rotateX(90deg);
  119. }
  120. 40% {
  121. -webkit-transform: perspective(400px) rotateX(-10deg);
  122. transform: perspective(400px) rotateX(-10deg);
  123. }
  124. 70% {
  125. -webkit-transform: perspective(400px) rotateX(10deg);
  126. transform: perspective(400px) rotateX(10deg);
  127. }
  128. to {
  129. opacity: 1;
  130. -webkit-transform: perspective(400px) rotateX(0deg);
  131. transform: perspective(400px) rotateX(0deg);
  132. }
  133. }
  134. @keyframes flipInXBounce {
  135. from {
  136. opacity: 0;
  137. -webkit-transform: perspective(400px) rotateX(90deg);
  138. transform: perspective(400px) rotateX(90deg);
  139. }
  140. 40% {
  141. -webkit-transform: perspective(400px) rotateX(-10deg);
  142. transform: perspective(400px) rotateX(-10deg);
  143. }
  144. 70% {
  145. -webkit-transform: perspective(400px) rotateX(10deg);
  146. transform: perspective(400px) rotateX(10deg);
  147. }
  148. to {
  149. opacity: 1;
  150. -webkit-transform: perspective(400px) rotateX(0deg);
  151. transform: perspective(400px) rotateX(0deg);
  152. }
  153. }
  154. @-webkit-keyframes flipOutX {
  155. from {
  156. opacity: 1;
  157. -webkit-transform: perspective(400px) rotateX(0deg);
  158. transform: perspective(400px) rotateX(0deg);
  159. }
  160. to {
  161. opacity: 0;
  162. -webkit-transform: perspective(400px) rotateX(90deg);
  163. transform: perspective(400px) rotateX(90deg);
  164. }
  165. }
  166. @keyframes flipOutX {
  167. from {
  168. opacity: 1;
  169. -webkit-transform: perspective(400px) rotateX(0deg);
  170. transform: perspective(400px) rotateX(0deg);
  171. }
  172. to {
  173. opacity: 0;
  174. -webkit-transform: perspective(400px) rotateX(90deg);
  175. transform: perspective(400px) rotateX(90deg);
  176. }
  177. }