slide.css 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267
  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-slide-top {
  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-slide-top.am-slide-top-add,
  17. .am-slide-top.ng-hide-remove,
  18. .am-slide-top.ng-move {
  19. -webkit-animation-name: slideFromTop;
  20. animation-name: slideFromTop;
  21. }
  22. .am-slide-top.am-slide-top-remove,
  23. .am-slide-top.ng-hide {
  24. -webkit-animation-name: slideToTop;
  25. animation-name: slideToTop;
  26. }
  27. .am-slide-top.ng-enter {
  28. visibility: hidden;
  29. -webkit-animation-name: slideFromTop;
  30. animation-name: slideFromTop;
  31. -webkit-animation-play-state: paused;
  32. animation-play-state: paused;
  33. }
  34. .am-slide-top.ng-enter.ng-enter-active {
  35. visibility: visible;
  36. -webkit-animation-play-state: running;
  37. animation-play-state: running;
  38. }
  39. .am-slide-top.ng-leave {
  40. -webkit-animation-name: slideToTop;
  41. animation-name: slideToTop;
  42. -webkit-animation-play-state: paused;
  43. animation-play-state: paused;
  44. }
  45. .am-slide-top.ng-leave.ng-leave-active {
  46. -webkit-animation-play-state: running;
  47. animation-play-state: running;
  48. }
  49. .am-slide-right {
  50. -webkit-animation-duration: 0.3s;
  51. animation-duration: 0.3s;
  52. -webkit-animation-timing-function: ease-in-out;
  53. animation-timing-function: ease-in-out;
  54. -webkit-animation-fill-mode: backwards;
  55. animation-fill-mode: backwards;
  56. }
  57. .am-slide-right.am-slide-right-add,
  58. .am-slide-right.ng-hide-remove,
  59. .am-slide-right.ng-move {
  60. -webkit-animation-name: slideFromRight;
  61. animation-name: slideFromRight;
  62. }
  63. .am-slide-right.am-slide-right-remove,
  64. .am-slide-right.ng-hide {
  65. -webkit-animation-name: slideToRight;
  66. animation-name: slideToRight;
  67. }
  68. .am-slide-right.ng-enter {
  69. visibility: hidden;
  70. -webkit-animation-name: slideFromRight;
  71. animation-name: slideFromRight;
  72. -webkit-animation-play-state: paused;
  73. animation-play-state: paused;
  74. }
  75. .am-slide-right.ng-enter.ng-enter-active {
  76. visibility: visible;
  77. -webkit-animation-play-state: running;
  78. animation-play-state: running;
  79. }
  80. .am-slide-right.ng-leave {
  81. -webkit-animation-name: slideToRight;
  82. animation-name: slideToRight;
  83. -webkit-animation-play-state: paused;
  84. animation-play-state: paused;
  85. }
  86. .am-slide-right.ng-leave.ng-leave-active {
  87. -webkit-animation-play-state: running;
  88. animation-play-state: running;
  89. }
  90. .am-slide-bottom {
  91. -webkit-animation-duration: 0.3s;
  92. animation-duration: 0.3s;
  93. -webkit-animation-timing-function: ease-in-out;
  94. animation-timing-function: ease-in-out;
  95. -webkit-animation-fill-mode: backwards;
  96. animation-fill-mode: backwards;
  97. }
  98. .am-slide-bottom.am-slide-bottom-add,
  99. .am-slide-bottom.ng-hide-remove,
  100. .am-slide-bottom.ng-move {
  101. -webkit-animation-name: slideFromBottom;
  102. animation-name: slideFromBottom;
  103. }
  104. .am-slide-bottom.am-slide-bottom-remove,
  105. .am-slide-bottom.ng-hide {
  106. -webkit-animation-name: slideToBottom;
  107. animation-name: slideToBottom;
  108. }
  109. .am-slide-bottom.ng-enter {
  110. visibility: hidden;
  111. -webkit-animation-name: slideFromBottom;
  112. animation-name: slideFromBottom;
  113. -webkit-animation-play-state: paused;
  114. animation-play-state: paused;
  115. }
  116. .am-slide-bottom.ng-enter.ng-enter-active {
  117. visibility: visible;
  118. -webkit-animation-play-state: running;
  119. animation-play-state: running;
  120. }
  121. .am-slide-bottom.ng-leave {
  122. -webkit-animation-name: slideToBottom;
  123. animation-name: slideToBottom;
  124. -webkit-animation-play-state: paused;
  125. animation-play-state: paused;
  126. }
  127. .am-slide-bottom.ng-leave.ng-leave-active {
  128. -webkit-animation-play-state: running;
  129. animation-play-state: running;
  130. }
  131. .am-slide-left {
  132. -webkit-animation-duration: 0.3s;
  133. animation-duration: 0.3s;
  134. -webkit-animation-timing-function: ease-in-out;
  135. animation-timing-function: ease-in-out;
  136. -webkit-animation-fill-mode: backwards;
  137. animation-fill-mode: backwards;
  138. }
  139. .am-slide-left.am-slide-left-add,
  140. .am-slide-left.ng-hide-remove,
  141. .am-slide-left.ng-move {
  142. -webkit-animation-name: slideFromLeft;
  143. animation-name: slideFromLeft;
  144. }
  145. .am-slide-left.am-slide-left-remove,
  146. .am-slide-left.ng-hide {
  147. -webkit-animation-name: slideToLeft;
  148. animation-name: slideToLeft;
  149. }
  150. .am-slide-left.ng-enter {
  151. visibility: hidden;
  152. -webkit-animation-name: slideFromLeft;
  153. animation-name: slideFromLeft;
  154. -webkit-animation-play-state: paused;
  155. animation-play-state: paused;
  156. }
  157. .am-slide-left.ng-enter.ng-enter-active {
  158. visibility: visible;
  159. -webkit-animation-play-state: running;
  160. animation-play-state: running;
  161. }
  162. .am-slide-left.ng-leave {
  163. -webkit-animation-name: slideToLeft;
  164. animation-name: slideToLeft;
  165. -webkit-animation-play-state: paused;
  166. animation-play-state: paused;
  167. }
  168. .am-slide-left.ng-leave.ng-leave-active {
  169. -webkit-animation-play-state: running;
  170. animation-play-state: running;
  171. }
  172. @-webkit-keyframes slideFromTop {
  173. from {
  174. -webkit-transform: translateY(-100%);
  175. transform: translateY(-100%);
  176. }
  177. }
  178. @keyframes slideFromTop {
  179. from {
  180. -webkit-transform: translateY(-100%);
  181. transform: translateY(-100%);
  182. }
  183. }
  184. @-webkit-keyframes slideToTop {
  185. to {
  186. -webkit-transform: translateY(-100%);
  187. transform: translateY(-100%);
  188. }
  189. }
  190. @keyframes slideToTop {
  191. to {
  192. -webkit-transform: translateY(-100%);
  193. transform: translateY(-100%);
  194. }
  195. }
  196. @-webkit-keyframes slideFromRight {
  197. from {
  198. -webkit-transform: translateX(100%);
  199. transform: translateX(100%);
  200. }
  201. }
  202. @keyframes slideFromRight {
  203. from {
  204. -webkit-transform: translateX(100%);
  205. transform: translateX(100%);
  206. }
  207. }
  208. @-webkit-keyframes slideToRight {
  209. to {
  210. -webkit-transform: translateX(100%);
  211. transform: translateX(100%);
  212. }
  213. }
  214. @keyframes slideToRight {
  215. to {
  216. -webkit-transform: translateX(100%);
  217. transform: translateX(100%);
  218. }
  219. }
  220. @-webkit-keyframes slideFromBottom {
  221. from {
  222. -webkit-transform: translateY(100%);
  223. transform: translateY(100%);
  224. }
  225. }
  226. @keyframes slideFromBottom {
  227. from {
  228. -webkit-transform: translateY(100%);
  229. transform: translateY(100%);
  230. }
  231. }
  232. @-webkit-keyframes slideToBottom {
  233. to {
  234. -webkit-transform: translateY(100%);
  235. transform: translateY(100%);
  236. }
  237. }
  238. @keyframes slideToBottom {
  239. to {
  240. -webkit-transform: translateY(100%);
  241. transform: translateY(100%);
  242. }
  243. }
  244. @-webkit-keyframes slideFromLeft {
  245. from {
  246. -webkit-transform: translateX(-100%);
  247. transform: translateX(-100%);
  248. }
  249. }
  250. @keyframes slideFromLeft {
  251. from {
  252. -webkit-transform: translateX(-100%);
  253. transform: translateX(-100%);
  254. }
  255. }
  256. @-webkit-keyframes slideToLeft {
  257. to {
  258. -webkit-transform: translateX(-100%);
  259. transform: translateX(-100%);
  260. }
  261. }
  262. @keyframes slideToLeft {
  263. to {
  264. -webkit-transform: translateX(-100%);
  265. transform: translateX(-100%);
  266. }
  267. }