fade-and-slide.css 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333
  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-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-fade-and-slide-top.am-fade-and-slide-top-add,
  17. .am-fade-and-slide-top.ng-hide-remove,
  18. .am-fade-and-slide-top.ng-move {
  19. -webkit-animation-name: fadeAndSlideFromTop;
  20. animation-name: fadeAndSlideFromTop;
  21. }
  22. .am-fade-and-slide-top.am-fade-and-slide-top-remove,
  23. .am-fade-and-slide-top.ng-hide {
  24. -webkit-animation-name: fadeAndSlideToTop;
  25. animation-name: fadeAndSlideToTop;
  26. }
  27. .am-fade-and-slide-top.ng-enter {
  28. visibility: hidden;
  29. -webkit-animation-name: fadeAndSlideFromTop;
  30. animation-name: fadeAndSlideFromTop;
  31. -webkit-animation-play-state: paused;
  32. animation-play-state: paused;
  33. }
  34. .am-fade-and-slide-top.ng-enter.ng-enter-active {
  35. visibility: visible;
  36. -webkit-animation-play-state: running;
  37. animation-play-state: running;
  38. }
  39. .am-fade-and-slide-top.ng-leave {
  40. -webkit-animation-name: fadeAndSlideToTop;
  41. animation-name: fadeAndSlideToTop;
  42. -webkit-animation-play-state: paused;
  43. animation-play-state: paused;
  44. }
  45. .am-fade-and-slide-top.ng-leave.ng-leave-active {
  46. -webkit-animation-play-state: running;
  47. animation-play-state: running;
  48. }
  49. .am-fade-and-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-fade-and-slide-right.am-fade-and-slide-right-add,
  58. .am-fade-and-slide-right.ng-hide-remove,
  59. .am-fade-and-slide-right.ng-move {
  60. -webkit-animation-name: fadeAndSlideFromRight;
  61. animation-name: fadeAndSlideFromRight;
  62. }
  63. .am-fade-and-slide-right.am-fade-and-slide-right-remove,
  64. .am-fade-and-slide-right.ng-hide {
  65. -webkit-animation-name: fadeAndSlideToRight;
  66. animation-name: fadeAndSlideToRight;
  67. }
  68. .am-fade-and-slide-right.ng-enter {
  69. visibility: hidden;
  70. -webkit-animation-name: fadeAndSlideFromRight;
  71. animation-name: fadeAndSlideFromRight;
  72. -webkit-animation-play-state: paused;
  73. animation-play-state: paused;
  74. }
  75. .am-fade-and-slide-right.ng-enter.ng-enter-active {
  76. visibility: visible;
  77. -webkit-animation-play-state: running;
  78. animation-play-state: running;
  79. }
  80. .am-fade-and-slide-right.ng-leave {
  81. -webkit-animation-name: fadeAndSlideToRight;
  82. animation-name: fadeAndSlideToRight;
  83. -webkit-animation-play-state: paused;
  84. animation-play-state: paused;
  85. }
  86. .am-fade-and-slide-right.ng-leave.ng-leave-active {
  87. -webkit-animation-play-state: running;
  88. animation-play-state: running;
  89. }
  90. .am-fade-and-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-fade-and-slide-bottom.am-fade-and-slide-bottom-add,
  99. .am-fade-and-slide-bottom.ng-hide-remove,
  100. .am-fade-and-slide-bottom.ng-move {
  101. -webkit-animation-name: fadeAndSlideFromBottom;
  102. animation-name: fadeAndSlideFromBottom;
  103. }
  104. .am-fade-and-slide-bottom.am-fade-and-slide-bottom-remove,
  105. .am-fade-and-slide-bottom.ng-hide {
  106. -webkit-animation-name: fadeAndSlideToBottom;
  107. animation-name: fadeAndSlideToBottom;
  108. }
  109. .am-fade-and-slide-bottom.ng-enter {
  110. visibility: hidden;
  111. -webkit-animation-name: fadeAndSlideFromBottom;
  112. animation-name: fadeAndSlideFromBottom;
  113. -webkit-animation-play-state: paused;
  114. animation-play-state: paused;
  115. }
  116. .am-fade-and-slide-bottom.ng-enter.ng-enter-active {
  117. visibility: visible;
  118. -webkit-animation-play-state: running;
  119. animation-play-state: running;
  120. }
  121. .am-fade-and-slide-bottom.ng-leave {
  122. -webkit-animation-name: fadeAndSlideToBottom;
  123. animation-name: fadeAndSlideToBottom;
  124. -webkit-animation-play-state: paused;
  125. animation-play-state: paused;
  126. }
  127. .am-fade-and-slide-bottom.ng-leave.ng-leave-active {
  128. -webkit-animation-play-state: running;
  129. animation-play-state: running;
  130. }
  131. .am-fade-and-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-fade-and-slide-left.am-fade-and-slide-left-add,
  140. .am-fade-and-slide-left.ng-hide-remove,
  141. .am-fade-and-slide-left.ng-move {
  142. -webkit-animation-fill-mode: backwards;
  143. animation-fill-mode: backwards;
  144. -webkit-animation-name: fadeAndSlideFromLeft;
  145. animation-name: fadeAndSlideFromLeft;
  146. }
  147. .am-fade-and-slide-left.am-fade-and-slide-left-remove,
  148. .am-fade-and-slide-left.ng-hide {
  149. -webkit-animation-name: fadeAndSlideToLeft;
  150. animation-name: fadeAndSlideToLeft;
  151. }
  152. .am-fade-and-slide-left.ng-enter {
  153. visibility: hidden;
  154. -webkit-animation-name: fadeAndSlideFromLeft;
  155. animation-name: fadeAndSlideFromLeft;
  156. -webkit-animation-play-state: paused;
  157. animation-play-state: paused;
  158. }
  159. .am-fade-and-slide-left.ng-enter.ng-enter-active {
  160. visibility: visible;
  161. -webkit-animation-play-state: running;
  162. animation-play-state: running;
  163. }
  164. .am-fade-and-slide-left.ng-leave {
  165. -webkit-animation-name: fadeAndSlideToLeft;
  166. animation-name: fadeAndSlideToLeft;
  167. -webkit-animation-play-state: paused;
  168. animation-play-state: paused;
  169. }
  170. .am-fade-and-slide-left.ng-leave.ng-leave-active {
  171. -webkit-animation-play-state: running;
  172. animation-play-state: running;
  173. }
  174. @-webkit-keyframes fadeAndSlideFromTop {
  175. from {
  176. opacity: 0;
  177. -webkit-transform: translateY(-20%);
  178. transform: translateY(-20%);
  179. }
  180. to {
  181. opacity: 1;
  182. }
  183. }
  184. @keyframes fadeAndSlideFromTop {
  185. from {
  186. opacity: 0;
  187. -webkit-transform: translateY(-20%);
  188. transform: translateY(-20%);
  189. }
  190. to {
  191. opacity: 1;
  192. }
  193. }
  194. @-webkit-keyframes fadeAndSlideToTop {
  195. from {
  196. opacity: 1;
  197. }
  198. to {
  199. opacity: 0;
  200. -webkit-transform: translateY(-20%);
  201. transform: translateY(-20%);
  202. }
  203. }
  204. @keyframes fadeAndSlideToTop {
  205. from {
  206. opacity: 1;
  207. }
  208. to {
  209. opacity: 0;
  210. -webkit-transform: translateY(-20%);
  211. transform: translateY(-20%);
  212. }
  213. }
  214. @-webkit-keyframes fadeAndSlideFromRight {
  215. from {
  216. opacity: 0;
  217. -webkit-transform: translateX(20%);
  218. transform: translateX(20%);
  219. }
  220. to {
  221. opacity: 1;
  222. }
  223. }
  224. @keyframes fadeAndSlideFromRight {
  225. from {
  226. opacity: 0;
  227. -webkit-transform: translateX(20%);
  228. transform: translateX(20%);
  229. }
  230. to {
  231. opacity: 1;
  232. }
  233. }
  234. @-webkit-keyframes fadeAndSlideToRight {
  235. from {
  236. opacity: 1;
  237. }
  238. to {
  239. opacity: 0;
  240. -webkit-transform: translateX(20%);
  241. transform: translateX(20%);
  242. }
  243. }
  244. @keyframes fadeAndSlideToRight {
  245. from {
  246. opacity: 1;
  247. }
  248. to {
  249. opacity: 0;
  250. -webkit-transform: translateX(20%);
  251. transform: translateX(20%);
  252. }
  253. }
  254. @-webkit-keyframes fadeAndSlideFromBottom {
  255. from {
  256. opacity: 0;
  257. -webkit-transform: translateY(20%);
  258. transform: translateY(20%);
  259. }
  260. to {
  261. opacity: 1;
  262. }
  263. }
  264. @keyframes fadeAndSlideFromBottom {
  265. from {
  266. opacity: 0;
  267. -webkit-transform: translateY(20%);
  268. transform: translateY(20%);
  269. }
  270. to {
  271. opacity: 1;
  272. }
  273. }
  274. @-webkit-keyframes fadeAndSlideToBottom {
  275. from {
  276. opacity: 1;
  277. }
  278. to {
  279. opacity: 0;
  280. -webkit-transform: translateY(20%);
  281. transform: translateY(20%);
  282. }
  283. }
  284. @keyframes fadeAndSlideToBottom {
  285. from {
  286. opacity: 1;
  287. }
  288. to {
  289. opacity: 0;
  290. -webkit-transform: translateY(20%);
  291. transform: translateY(20%);
  292. }
  293. }
  294. @-webkit-keyframes fadeAndSlideFromLeft {
  295. from {
  296. opacity: 0;
  297. -webkit-transform: translateX(-20%);
  298. transform: translateX(-20%);
  299. }
  300. to {
  301. opacity: 1;
  302. }
  303. }
  304. @keyframes fadeAndSlideFromLeft {
  305. from {
  306. opacity: 0;
  307. -webkit-transform: translateX(-20%);
  308. transform: translateX(-20%);
  309. }
  310. to {
  311. opacity: 1;
  312. }
  313. }
  314. @-webkit-keyframes fadeAndSlideToLeft {
  315. from {
  316. opacity: 1;
  317. }
  318. to {
  319. opacity: 0;
  320. -webkit-transform: translateX(-20%);
  321. transform: translateX(-20%);
  322. }
  323. }
  324. @keyframes fadeAndSlideToLeft {
  325. from {
  326. opacity: 1;
  327. }
  328. to {
  329. opacity: 0;
  330. -webkit-transform: translateX(-20%);
  331. transform: translateX(-20%);
  332. }
  333. }