angular-motion.css 26 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027
  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-collapse {
  9. -webkit-animation-duration: 0.3s;
  10. animation-duration: 0.3s;
  11. -webkit-animation-timing-function: ease;
  12. animation-timing-function: ease;
  13. -webkit-animation-fill-mode: backwards;
  14. animation-fill-mode: backwards;
  15. overflow: hidden;
  16. opacity: 1;
  17. }
  18. .am-collapse.am-collapse-add,
  19. .am-collapse.ng-hide-remove,
  20. .am-collapse.ng-move {
  21. -webkit-animation-name: expand;
  22. animation-name: expand;
  23. }
  24. .am-collapse.am-collapse-remove,
  25. .am-collapse.ng-hide {
  26. -webkit-animation-name: collapse;
  27. animation-name: collapse;
  28. }
  29. .am-collapse.ng-enter {
  30. visibility: hidden;
  31. -webkit-animation-name: expand;
  32. animation-name: expand;
  33. -webkit-animation-play-state: paused;
  34. animation-play-state: paused;
  35. }
  36. .am-collapse.ng-enter.ng-enter-active {
  37. visibility: visible;
  38. -webkit-animation-play-state: running;
  39. animation-play-state: running;
  40. }
  41. .am-collapse.ng-leave {
  42. -webkit-animation-name: collapse;
  43. animation-name: collapse;
  44. -webkit-animation-play-state: paused;
  45. animation-play-state: paused;
  46. }
  47. .am-collapse.ng-leave.ng-leave-active {
  48. -webkit-animation-play-state: running;
  49. animation-play-state: running;
  50. }
  51. @-webkit-keyframes expand {
  52. from {
  53. max-height: 0px;
  54. }
  55. to {
  56. max-height: 500px;
  57. }
  58. }
  59. @keyframes expand {
  60. from {
  61. max-height: 0px;
  62. }
  63. to {
  64. max-height: 500px;
  65. }
  66. }
  67. @-webkit-keyframes collapse {
  68. from {
  69. max-height: 500px;
  70. }
  71. to {
  72. max-height: 0px;
  73. }
  74. }
  75. @keyframes collapse {
  76. from {
  77. max-height: 500px;
  78. }
  79. to {
  80. max-height: 0px;
  81. }
  82. }
  83. .panel-collapse.am-collapse.in-remove {
  84. -webkit-animation-name: collapse;
  85. animation-name: collapse;
  86. display: block;
  87. }
  88. .panel-collapse.am-collapse.in-add {
  89. -webkit-animation-name: expand;
  90. animation-name: expand;
  91. }
  92. .am-fade {
  93. -webkit-animation-duration: 0.3s;
  94. animation-duration: 0.3s;
  95. -webkit-animation-timing-function: linear;
  96. animation-timing-function: linear;
  97. -webkit-animation-fill-mode: backwards;
  98. animation-fill-mode: backwards;
  99. opacity: 1;
  100. }
  101. .am-fade.am-fade-add,
  102. .am-fade.ng-hide-remove,
  103. .am-fade.ng-move {
  104. -webkit-animation-name: fadeIn;
  105. animation-name: fadeIn;
  106. }
  107. .am-fade.am-fade-remove,
  108. .am-fade.ng-hide {
  109. -webkit-animation-name: fadeOut;
  110. animation-name: fadeOut;
  111. }
  112. .am-fade.ng-enter {
  113. visibility: hidden;
  114. -webkit-animation-name: fadeIn;
  115. animation-name: fadeIn;
  116. -webkit-animation-play-state: paused;
  117. animation-play-state: paused;
  118. }
  119. .am-fade.ng-enter.ng-enter-active {
  120. visibility: visible;
  121. -webkit-animation-play-state: running;
  122. animation-play-state: running;
  123. }
  124. .am-fade.ng-leave {
  125. -webkit-animation-name: fadeOut;
  126. animation-name: fadeOut;
  127. -webkit-animation-play-state: paused;
  128. animation-play-state: paused;
  129. }
  130. .am-fade.ng-leave.ng-leave-active {
  131. -webkit-animation-play-state: running;
  132. animation-play-state: running;
  133. }
  134. @-webkit-keyframes fadeIn {
  135. from {
  136. opacity: 0;
  137. }
  138. to {
  139. opacity: 1;
  140. }
  141. }
  142. @keyframes fadeIn {
  143. from {
  144. opacity: 0;
  145. }
  146. to {
  147. opacity: 1;
  148. }
  149. }
  150. @-webkit-keyframes fadeOut {
  151. from {
  152. opacity: 1;
  153. }
  154. to {
  155. opacity: 0;
  156. }
  157. }
  158. @keyframes fadeOut {
  159. from {
  160. opacity: 1;
  161. }
  162. to {
  163. opacity: 0;
  164. }
  165. }
  166. .tab-pane.am-fade.active-remove {
  167. display: none !important;
  168. }
  169. .tab-pane.am-fade.active-add {
  170. -webkit-animation-name: fadeIn;
  171. animation-name: fadeIn;
  172. }
  173. .modal-backdrop.am-fade,
  174. .aside-backdrop.am-fade {
  175. background: rgba(0, 0, 0, 0.5);
  176. -webkit-animation-duration: 0.15s;
  177. animation-duration: 0.15s;
  178. }
  179. .modal-backdrop.am-fade.ng-leave,
  180. .aside-backdrop.am-fade.ng-leave {
  181. -webkit-animation-delay: 0.3s;
  182. animation-delay: 0.3s;
  183. }
  184. .am-fade-and-scale {
  185. -webkit-animation-duration: 0.3s;
  186. animation-duration: 0.3s;
  187. -webkit-animation-timing-function: ease-in-out;
  188. animation-timing-function: ease-in-out;
  189. -webkit-animation-fill-mode: backwards;
  190. animation-fill-mode: backwards;
  191. }
  192. .am-fade-and-scale.ng-enter,
  193. .am-fade-and-scale.am-fade-and-scale-add,
  194. .am-fade-and-scale.ng-hide-remove,
  195. .am-fade-and-scale.ng-move {
  196. -webkit-animation-name: fadeAndScaleIn;
  197. animation-name: fadeAndScaleIn;
  198. }
  199. .am-fade-and-scale.ng-leave,
  200. .am-fade-and-scale.am-fade-and-scale-remove,
  201. .am-fade-and-scale.ng-hide {
  202. -webkit-animation-name: fadeAndScaleOut;
  203. animation-name: fadeAndScaleOut;
  204. }
  205. .am-fade-and-scale.ng-enter {
  206. visibility: hidden;
  207. -webkit-animation-name: fadeAndScaleIn;
  208. animation-name: fadeAndScaleIn;
  209. -webkit-animation-play-state: paused;
  210. animation-play-state: paused;
  211. }
  212. .am-fade-and-scale.ng-enter.ng-enter-active {
  213. visibility: visible;
  214. -webkit-animation-play-state: running;
  215. animation-play-state: running;
  216. }
  217. .am-fade-and-scale.ng-leave {
  218. -webkit-animation-name: fadeAndScaleOut;
  219. animation-name: fadeAndScaleOut;
  220. -webkit-animation-play-state: paused;
  221. animation-play-state: paused;
  222. }
  223. .am-fade-and-scale.ng-leave.ng-leave-active {
  224. -webkit-animation-play-state: running;
  225. animation-play-state: running;
  226. }
  227. @-webkit-keyframes fadeAndScaleIn {
  228. from {
  229. opacity: 0;
  230. -webkit-transform: scale(0.7);
  231. transform: scale(0.7);
  232. }
  233. to {
  234. opacity: 1;
  235. }
  236. }
  237. @keyframes fadeAndScaleIn {
  238. from {
  239. opacity: 0;
  240. -webkit-transform: scale(0.7);
  241. transform: scale(0.7);
  242. }
  243. to {
  244. opacity: 1;
  245. }
  246. }
  247. @-webkit-keyframes fadeAndScaleOut {
  248. from {
  249. opacity: 1;
  250. }
  251. to {
  252. opacity: 0;
  253. -webkit-transform: scale(0.7);
  254. transform: scale(0.7);
  255. }
  256. }
  257. @keyframes fadeAndScaleOut {
  258. from {
  259. opacity: 1;
  260. }
  261. to {
  262. opacity: 0;
  263. -webkit-transform: scale(0.7);
  264. transform: scale(0.7);
  265. }
  266. }
  267. .am-fade-and-slide-top {
  268. -webkit-animation-duration: 0.3s;
  269. animation-duration: 0.3s;
  270. -webkit-animation-timing-function: ease-in-out;
  271. animation-timing-function: ease-in-out;
  272. -webkit-animation-fill-mode: backwards;
  273. animation-fill-mode: backwards;
  274. }
  275. .am-fade-and-slide-top.am-fade-and-slide-top-add,
  276. .am-fade-and-slide-top.ng-hide-remove,
  277. .am-fade-and-slide-top.ng-move {
  278. -webkit-animation-name: fadeAndSlideFromTop;
  279. animation-name: fadeAndSlideFromTop;
  280. }
  281. .am-fade-and-slide-top.am-fade-and-slide-top-remove,
  282. .am-fade-and-slide-top.ng-hide {
  283. -webkit-animation-name: fadeAndSlideToTop;
  284. animation-name: fadeAndSlideToTop;
  285. }
  286. .am-fade-and-slide-top.ng-enter {
  287. visibility: hidden;
  288. -webkit-animation-name: fadeAndSlideFromTop;
  289. animation-name: fadeAndSlideFromTop;
  290. -webkit-animation-play-state: paused;
  291. animation-play-state: paused;
  292. }
  293. .am-fade-and-slide-top.ng-enter.ng-enter-active {
  294. visibility: visible;
  295. -webkit-animation-play-state: running;
  296. animation-play-state: running;
  297. }
  298. .am-fade-and-slide-top.ng-leave {
  299. -webkit-animation-name: fadeAndSlideToTop;
  300. animation-name: fadeAndSlideToTop;
  301. -webkit-animation-play-state: paused;
  302. animation-play-state: paused;
  303. }
  304. .am-fade-and-slide-top.ng-leave.ng-leave-active {
  305. -webkit-animation-play-state: running;
  306. animation-play-state: running;
  307. }
  308. .am-fade-and-slide-right {
  309. -webkit-animation-duration: 0.3s;
  310. animation-duration: 0.3s;
  311. -webkit-animation-timing-function: ease-in-out;
  312. animation-timing-function: ease-in-out;
  313. -webkit-animation-fill-mode: backwards;
  314. animation-fill-mode: backwards;
  315. }
  316. .am-fade-and-slide-right.am-fade-and-slide-right-add,
  317. .am-fade-and-slide-right.ng-hide-remove,
  318. .am-fade-and-slide-right.ng-move {
  319. -webkit-animation-name: fadeAndSlideFromRight;
  320. animation-name: fadeAndSlideFromRight;
  321. }
  322. .am-fade-and-slide-right.am-fade-and-slide-right-remove,
  323. .am-fade-and-slide-right.ng-hide {
  324. -webkit-animation-name: fadeAndSlideToRight;
  325. animation-name: fadeAndSlideToRight;
  326. }
  327. .am-fade-and-slide-right.ng-enter {
  328. visibility: hidden;
  329. -webkit-animation-name: fadeAndSlideFromRight;
  330. animation-name: fadeAndSlideFromRight;
  331. -webkit-animation-play-state: paused;
  332. animation-play-state: paused;
  333. }
  334. .am-fade-and-slide-right.ng-enter.ng-enter-active {
  335. visibility: visible;
  336. -webkit-animation-play-state: running;
  337. animation-play-state: running;
  338. }
  339. .am-fade-and-slide-right.ng-leave {
  340. -webkit-animation-name: fadeAndSlideToRight;
  341. animation-name: fadeAndSlideToRight;
  342. -webkit-animation-play-state: paused;
  343. animation-play-state: paused;
  344. }
  345. .am-fade-and-slide-right.ng-leave.ng-leave-active {
  346. -webkit-animation-play-state: running;
  347. animation-play-state: running;
  348. }
  349. .am-fade-and-slide-bottom {
  350. -webkit-animation-duration: 0.3s;
  351. animation-duration: 0.3s;
  352. -webkit-animation-timing-function: ease-in-out;
  353. animation-timing-function: ease-in-out;
  354. -webkit-animation-fill-mode: backwards;
  355. animation-fill-mode: backwards;
  356. }
  357. .am-fade-and-slide-bottom.am-fade-and-slide-bottom-add,
  358. .am-fade-and-slide-bottom.ng-hide-remove,
  359. .am-fade-and-slide-bottom.ng-move {
  360. -webkit-animation-name: fadeAndSlideFromBottom;
  361. animation-name: fadeAndSlideFromBottom;
  362. }
  363. .am-fade-and-slide-bottom.am-fade-and-slide-bottom-remove,
  364. .am-fade-and-slide-bottom.ng-hide {
  365. -webkit-animation-name: fadeAndSlideToBottom;
  366. animation-name: fadeAndSlideToBottom;
  367. }
  368. .am-fade-and-slide-bottom.ng-enter {
  369. visibility: hidden;
  370. -webkit-animation-name: fadeAndSlideFromBottom;
  371. animation-name: fadeAndSlideFromBottom;
  372. -webkit-animation-play-state: paused;
  373. animation-play-state: paused;
  374. }
  375. .am-fade-and-slide-bottom.ng-enter.ng-enter-active {
  376. visibility: visible;
  377. -webkit-animation-play-state: running;
  378. animation-play-state: running;
  379. }
  380. .am-fade-and-slide-bottom.ng-leave {
  381. -webkit-animation-name: fadeAndSlideToBottom;
  382. animation-name: fadeAndSlideToBottom;
  383. -webkit-animation-play-state: paused;
  384. animation-play-state: paused;
  385. }
  386. .am-fade-and-slide-bottom.ng-leave.ng-leave-active {
  387. -webkit-animation-play-state: running;
  388. animation-play-state: running;
  389. }
  390. .am-fade-and-slide-left {
  391. -webkit-animation-duration: 0.3s;
  392. animation-duration: 0.3s;
  393. -webkit-animation-timing-function: ease-in-out;
  394. animation-timing-function: ease-in-out;
  395. -webkit-animation-fill-mode: backwards;
  396. animation-fill-mode: backwards;
  397. }
  398. .am-fade-and-slide-left.am-fade-and-slide-left-add,
  399. .am-fade-and-slide-left.ng-hide-remove,
  400. .am-fade-and-slide-left.ng-move {
  401. -webkit-animation-fill-mode: backwards;
  402. animation-fill-mode: backwards;
  403. -webkit-animation-name: fadeAndSlideFromLeft;
  404. animation-name: fadeAndSlideFromLeft;
  405. }
  406. .am-fade-and-slide-left.am-fade-and-slide-left-remove,
  407. .am-fade-and-slide-left.ng-hide {
  408. -webkit-animation-name: fadeAndSlideToLeft;
  409. animation-name: fadeAndSlideToLeft;
  410. }
  411. .am-fade-and-slide-left.ng-enter {
  412. visibility: hidden;
  413. -webkit-animation-name: fadeAndSlideFromLeft;
  414. animation-name: fadeAndSlideFromLeft;
  415. -webkit-animation-play-state: paused;
  416. animation-play-state: paused;
  417. }
  418. .am-fade-and-slide-left.ng-enter.ng-enter-active {
  419. visibility: visible;
  420. -webkit-animation-play-state: running;
  421. animation-play-state: running;
  422. }
  423. .am-fade-and-slide-left.ng-leave {
  424. -webkit-animation-name: fadeAndSlideToLeft;
  425. animation-name: fadeAndSlideToLeft;
  426. -webkit-animation-play-state: paused;
  427. animation-play-state: paused;
  428. }
  429. .am-fade-and-slide-left.ng-leave.ng-leave-active {
  430. -webkit-animation-play-state: running;
  431. animation-play-state: running;
  432. }
  433. @-webkit-keyframes fadeAndSlideFromTop {
  434. from {
  435. opacity: 0;
  436. -webkit-transform: translateY(-20%);
  437. transform: translateY(-20%);
  438. }
  439. to {
  440. opacity: 1;
  441. }
  442. }
  443. @keyframes fadeAndSlideFromTop {
  444. from {
  445. opacity: 0;
  446. -webkit-transform: translateY(-20%);
  447. transform: translateY(-20%);
  448. }
  449. to {
  450. opacity: 1;
  451. }
  452. }
  453. @-webkit-keyframes fadeAndSlideToTop {
  454. from {
  455. opacity: 1;
  456. }
  457. to {
  458. opacity: 0;
  459. -webkit-transform: translateY(-20%);
  460. transform: translateY(-20%);
  461. }
  462. }
  463. @keyframes fadeAndSlideToTop {
  464. from {
  465. opacity: 1;
  466. }
  467. to {
  468. opacity: 0;
  469. -webkit-transform: translateY(-20%);
  470. transform: translateY(-20%);
  471. }
  472. }
  473. @-webkit-keyframes fadeAndSlideFromRight {
  474. from {
  475. opacity: 0;
  476. -webkit-transform: translateX(20%);
  477. transform: translateX(20%);
  478. }
  479. to {
  480. opacity: 1;
  481. }
  482. }
  483. @keyframes fadeAndSlideFromRight {
  484. from {
  485. opacity: 0;
  486. -webkit-transform: translateX(20%);
  487. transform: translateX(20%);
  488. }
  489. to {
  490. opacity: 1;
  491. }
  492. }
  493. @-webkit-keyframes fadeAndSlideToRight {
  494. from {
  495. opacity: 1;
  496. }
  497. to {
  498. opacity: 0;
  499. -webkit-transform: translateX(20%);
  500. transform: translateX(20%);
  501. }
  502. }
  503. @keyframes fadeAndSlideToRight {
  504. from {
  505. opacity: 1;
  506. }
  507. to {
  508. opacity: 0;
  509. -webkit-transform: translateX(20%);
  510. transform: translateX(20%);
  511. }
  512. }
  513. @-webkit-keyframes fadeAndSlideFromBottom {
  514. from {
  515. opacity: 0;
  516. -webkit-transform: translateY(20%);
  517. transform: translateY(20%);
  518. }
  519. to {
  520. opacity: 1;
  521. }
  522. }
  523. @keyframes fadeAndSlideFromBottom {
  524. from {
  525. opacity: 0;
  526. -webkit-transform: translateY(20%);
  527. transform: translateY(20%);
  528. }
  529. to {
  530. opacity: 1;
  531. }
  532. }
  533. @-webkit-keyframes fadeAndSlideToBottom {
  534. from {
  535. opacity: 1;
  536. }
  537. to {
  538. opacity: 0;
  539. -webkit-transform: translateY(20%);
  540. transform: translateY(20%);
  541. }
  542. }
  543. @keyframes fadeAndSlideToBottom {
  544. from {
  545. opacity: 1;
  546. }
  547. to {
  548. opacity: 0;
  549. -webkit-transform: translateY(20%);
  550. transform: translateY(20%);
  551. }
  552. }
  553. @-webkit-keyframes fadeAndSlideFromLeft {
  554. from {
  555. opacity: 0;
  556. -webkit-transform: translateX(-20%);
  557. transform: translateX(-20%);
  558. }
  559. to {
  560. opacity: 1;
  561. }
  562. }
  563. @keyframes fadeAndSlideFromLeft {
  564. from {
  565. opacity: 0;
  566. -webkit-transform: translateX(-20%);
  567. transform: translateX(-20%);
  568. }
  569. to {
  570. opacity: 1;
  571. }
  572. }
  573. @-webkit-keyframes fadeAndSlideToLeft {
  574. from {
  575. opacity: 1;
  576. }
  577. to {
  578. opacity: 0;
  579. -webkit-transform: translateX(-20%);
  580. transform: translateX(-20%);
  581. }
  582. }
  583. @keyframes fadeAndSlideToLeft {
  584. from {
  585. opacity: 1;
  586. }
  587. to {
  588. opacity: 0;
  589. -webkit-transform: translateX(-20%);
  590. transform: translateX(-20%);
  591. }
  592. }
  593. .am-flip-x {
  594. -webkit-animation-duration: 0.4s;
  595. animation-duration: 0.4s;
  596. -webkit-animation-timing-function: ease;
  597. animation-timing-function: ease;
  598. -webkit-animation-fill-mode: backwards;
  599. animation-fill-mode: backwards;
  600. }
  601. .am-flip-x.am-flip-x-add,
  602. .am-flip-x.ng-hide-remove,
  603. .am-flip-x.ng-move {
  604. -webkit-animation-name: flipInXBounce;
  605. animation-name: flipInXBounce;
  606. }
  607. .am-flip-x.am-flip-x-remove,
  608. .am-flip-x.ng-hide {
  609. -webkit-animation-name: flipOutX;
  610. animation-name: flipOutX;
  611. }
  612. .am-flip-x.ng-enter {
  613. visibility: hidden;
  614. -webkit-animation-name: flipInXBounce;
  615. animation-name: flipInXBounce;
  616. -webkit-animation-play-state: paused;
  617. animation-play-state: paused;
  618. }
  619. .am-flip-x.ng-enter.ng-enter-active {
  620. visibility: visible;
  621. -webkit-animation-play-state: running;
  622. animation-play-state: running;
  623. }
  624. .am-flip-x.ng-leave {
  625. -webkit-animation-name: flipOutX;
  626. animation-name: flipOutX;
  627. -webkit-animation-play-state: paused;
  628. animation-play-state: paused;
  629. }
  630. .am-flip-x.ng-leave.ng-leave-active {
  631. -webkit-animation-play-state: running;
  632. animation-play-state: running;
  633. }
  634. .am-flip-x-linear {
  635. -webkit-animation-duration: 0.4s;
  636. animation-duration: 0.4s;
  637. -webkit-animation-timing-function: ease;
  638. animation-timing-function: ease;
  639. -webkit-animation-fill-mode: backwards;
  640. animation-fill-mode: backwards;
  641. }
  642. .am-flip-x-linear.am-flip-x-add,
  643. .am-flip-x-linear.ng-hide-remove,
  644. .am-flip-x-linear.ng-move {
  645. -webkit-animation-name: flipInX;
  646. animation-name: flipInX;
  647. }
  648. .am-flip-x-linear.am-flip-x-remove,
  649. .am-flip-x-linear.ng-hide {
  650. -webkit-animation-name: flipOutX;
  651. animation-name: flipOutX;
  652. }
  653. .am-flip-x-linear.ng-enter {
  654. visibility: hidden;
  655. -webkit-animation-name: flipInX;
  656. animation-name: flipInX;
  657. -webkit-animation-play-state: paused;
  658. animation-play-state: paused;
  659. }
  660. .am-flip-x-linear.ng-enter.ng-enter-active {
  661. visibility: visible;
  662. -webkit-animation-play-state: running;
  663. animation-play-state: running;
  664. }
  665. .am-flip-x-linear.ng-leave {
  666. -webkit-animation-name: flipOutX;
  667. animation-name: flipOutX;
  668. -webkit-animation-play-state: paused;
  669. animation-play-state: paused;
  670. }
  671. .am-flip-x-linear.ng-leave.ng-leave-active {
  672. -webkit-animation-play-state: running;
  673. animation-play-state: running;
  674. }
  675. @-webkit-keyframes flipInX {
  676. from {
  677. opacity: 0;
  678. -webkit-transform: perspective(400px) rotateX(90deg);
  679. transform: perspective(400px) rotateX(90deg);
  680. }
  681. to {
  682. opacity: 1;
  683. -webkit-transform: perspective(400px) rotateX(0deg);
  684. transform: perspective(400px) rotateX(0deg);
  685. }
  686. }
  687. @keyframes flipInX {
  688. from {
  689. opacity: 0;
  690. -webkit-transform: perspective(400px) rotateX(90deg);
  691. transform: perspective(400px) rotateX(90deg);
  692. }
  693. to {
  694. opacity: 1;
  695. -webkit-transform: perspective(400px) rotateX(0deg);
  696. transform: perspective(400px) rotateX(0deg);
  697. }
  698. }
  699. @-webkit-keyframes flipInXBounce {
  700. from {
  701. opacity: 0;
  702. -webkit-transform: perspective(400px) rotateX(90deg);
  703. transform: perspective(400px) rotateX(90deg);
  704. }
  705. 40% {
  706. -webkit-transform: perspective(400px) rotateX(-10deg);
  707. transform: perspective(400px) rotateX(-10deg);
  708. }
  709. 70% {
  710. -webkit-transform: perspective(400px) rotateX(10deg);
  711. transform: perspective(400px) rotateX(10deg);
  712. }
  713. to {
  714. opacity: 1;
  715. -webkit-transform: perspective(400px) rotateX(0deg);
  716. transform: perspective(400px) rotateX(0deg);
  717. }
  718. }
  719. @keyframes flipInXBounce {
  720. from {
  721. opacity: 0;
  722. -webkit-transform: perspective(400px) rotateX(90deg);
  723. transform: perspective(400px) rotateX(90deg);
  724. }
  725. 40% {
  726. -webkit-transform: perspective(400px) rotateX(-10deg);
  727. transform: perspective(400px) rotateX(-10deg);
  728. }
  729. 70% {
  730. -webkit-transform: perspective(400px) rotateX(10deg);
  731. transform: perspective(400px) rotateX(10deg);
  732. }
  733. to {
  734. opacity: 1;
  735. -webkit-transform: perspective(400px) rotateX(0deg);
  736. transform: perspective(400px) rotateX(0deg);
  737. }
  738. }
  739. @-webkit-keyframes flipOutX {
  740. from {
  741. opacity: 1;
  742. -webkit-transform: perspective(400px) rotateX(0deg);
  743. transform: perspective(400px) rotateX(0deg);
  744. }
  745. to {
  746. opacity: 0;
  747. -webkit-transform: perspective(400px) rotateX(90deg);
  748. transform: perspective(400px) rotateX(90deg);
  749. }
  750. }
  751. @keyframes flipOutX {
  752. from {
  753. opacity: 1;
  754. -webkit-transform: perspective(400px) rotateX(0deg);
  755. transform: perspective(400px) rotateX(0deg);
  756. }
  757. to {
  758. opacity: 0;
  759. -webkit-transform: perspective(400px) rotateX(90deg);
  760. transform: perspective(400px) rotateX(90deg);
  761. }
  762. }
  763. .am-slide-top {
  764. -webkit-animation-duration: 0.3s;
  765. animation-duration: 0.3s;
  766. -webkit-animation-timing-function: ease-in-out;
  767. animation-timing-function: ease-in-out;
  768. -webkit-animation-fill-mode: backwards;
  769. animation-fill-mode: backwards;
  770. }
  771. .am-slide-top.am-slide-top-add,
  772. .am-slide-top.ng-hide-remove,
  773. .am-slide-top.ng-move {
  774. -webkit-animation-name: slideFromTop;
  775. animation-name: slideFromTop;
  776. }
  777. .am-slide-top.am-slide-top-remove,
  778. .am-slide-top.ng-hide {
  779. -webkit-animation-name: slideToTop;
  780. animation-name: slideToTop;
  781. }
  782. .am-slide-top.ng-enter {
  783. visibility: hidden;
  784. -webkit-animation-name: slideFromTop;
  785. animation-name: slideFromTop;
  786. -webkit-animation-play-state: paused;
  787. animation-play-state: paused;
  788. }
  789. .am-slide-top.ng-enter.ng-enter-active {
  790. visibility: visible;
  791. -webkit-animation-play-state: running;
  792. animation-play-state: running;
  793. }
  794. .am-slide-top.ng-leave {
  795. -webkit-animation-name: slideToTop;
  796. animation-name: slideToTop;
  797. -webkit-animation-play-state: paused;
  798. animation-play-state: paused;
  799. }
  800. .am-slide-top.ng-leave.ng-leave-active {
  801. -webkit-animation-play-state: running;
  802. animation-play-state: running;
  803. }
  804. .am-slide-right {
  805. -webkit-animation-duration: 0.3s;
  806. animation-duration: 0.3s;
  807. -webkit-animation-timing-function: ease-in-out;
  808. animation-timing-function: ease-in-out;
  809. -webkit-animation-fill-mode: backwards;
  810. animation-fill-mode: backwards;
  811. }
  812. .am-slide-right.am-slide-right-add,
  813. .am-slide-right.ng-hide-remove,
  814. .am-slide-right.ng-move {
  815. -webkit-animation-name: slideFromRight;
  816. animation-name: slideFromRight;
  817. }
  818. .am-slide-right.am-slide-right-remove,
  819. .am-slide-right.ng-hide {
  820. -webkit-animation-name: slideToRight;
  821. animation-name: slideToRight;
  822. }
  823. .am-slide-right.ng-enter {
  824. visibility: hidden;
  825. -webkit-animation-name: slideFromRight;
  826. animation-name: slideFromRight;
  827. -webkit-animation-play-state: paused;
  828. animation-play-state: paused;
  829. }
  830. .am-slide-right.ng-enter.ng-enter-active {
  831. visibility: visible;
  832. -webkit-animation-play-state: running;
  833. animation-play-state: running;
  834. }
  835. .am-slide-right.ng-leave {
  836. -webkit-animation-name: slideToRight;
  837. animation-name: slideToRight;
  838. -webkit-animation-play-state: paused;
  839. animation-play-state: paused;
  840. }
  841. .am-slide-right.ng-leave.ng-leave-active {
  842. -webkit-animation-play-state: running;
  843. animation-play-state: running;
  844. }
  845. .am-slide-bottom {
  846. -webkit-animation-duration: 0.3s;
  847. animation-duration: 0.3s;
  848. -webkit-animation-timing-function: ease-in-out;
  849. animation-timing-function: ease-in-out;
  850. -webkit-animation-fill-mode: backwards;
  851. animation-fill-mode: backwards;
  852. }
  853. .am-slide-bottom.am-slide-bottom-add,
  854. .am-slide-bottom.ng-hide-remove,
  855. .am-slide-bottom.ng-move {
  856. -webkit-animation-name: slideFromBottom;
  857. animation-name: slideFromBottom;
  858. }
  859. .am-slide-bottom.am-slide-bottom-remove,
  860. .am-slide-bottom.ng-hide {
  861. -webkit-animation-name: slideToBottom;
  862. animation-name: slideToBottom;
  863. }
  864. .am-slide-bottom.ng-enter {
  865. visibility: hidden;
  866. -webkit-animation-name: slideFromBottom;
  867. animation-name: slideFromBottom;
  868. -webkit-animation-play-state: paused;
  869. animation-play-state: paused;
  870. }
  871. .am-slide-bottom.ng-enter.ng-enter-active {
  872. visibility: visible;
  873. -webkit-animation-play-state: running;
  874. animation-play-state: running;
  875. }
  876. .am-slide-bottom.ng-leave {
  877. -webkit-animation-name: slideToBottom;
  878. animation-name: slideToBottom;
  879. -webkit-animation-play-state: paused;
  880. animation-play-state: paused;
  881. }
  882. .am-slide-bottom.ng-leave.ng-leave-active {
  883. -webkit-animation-play-state: running;
  884. animation-play-state: running;
  885. }
  886. .am-slide-left {
  887. -webkit-animation-duration: 0.3s;
  888. animation-duration: 0.3s;
  889. -webkit-animation-timing-function: ease-in-out;
  890. animation-timing-function: ease-in-out;
  891. -webkit-animation-fill-mode: backwards;
  892. animation-fill-mode: backwards;
  893. }
  894. .am-slide-left.am-slide-left-add,
  895. .am-slide-left.ng-hide-remove,
  896. .am-slide-left.ng-move {
  897. -webkit-animation-name: slideFromLeft;
  898. animation-name: slideFromLeft;
  899. }
  900. .am-slide-left.am-slide-left-remove,
  901. .am-slide-left.ng-hide {
  902. -webkit-animation-name: slideToLeft;
  903. animation-name: slideToLeft;
  904. }
  905. .am-slide-left.ng-enter {
  906. visibility: hidden;
  907. -webkit-animation-name: slideFromLeft;
  908. animation-name: slideFromLeft;
  909. -webkit-animation-play-state: paused;
  910. animation-play-state: paused;
  911. }
  912. .am-slide-left.ng-enter.ng-enter-active {
  913. visibility: visible;
  914. -webkit-animation-play-state: running;
  915. animation-play-state: running;
  916. }
  917. .am-slide-left.ng-leave {
  918. -webkit-animation-name: slideToLeft;
  919. animation-name: slideToLeft;
  920. -webkit-animation-play-state: paused;
  921. animation-play-state: paused;
  922. }
  923. .am-slide-left.ng-leave.ng-leave-active {
  924. -webkit-animation-play-state: running;
  925. animation-play-state: running;
  926. }
  927. @-webkit-keyframes slideFromTop {
  928. from {
  929. -webkit-transform: translateY(-100%);
  930. transform: translateY(-100%);
  931. }
  932. }
  933. @keyframes slideFromTop {
  934. from {
  935. -webkit-transform: translateY(-100%);
  936. transform: translateY(-100%);
  937. }
  938. }
  939. @-webkit-keyframes slideToTop {
  940. to {
  941. -webkit-transform: translateY(-100%);
  942. transform: translateY(-100%);
  943. }
  944. }
  945. @keyframes slideToTop {
  946. to {
  947. -webkit-transform: translateY(-100%);
  948. transform: translateY(-100%);
  949. }
  950. }
  951. @-webkit-keyframes slideFromRight {
  952. from {
  953. -webkit-transform: translateX(100%);
  954. transform: translateX(100%);
  955. }
  956. }
  957. @keyframes slideFromRight {
  958. from {
  959. -webkit-transform: translateX(100%);
  960. transform: translateX(100%);
  961. }
  962. }
  963. @-webkit-keyframes slideToRight {
  964. to {
  965. -webkit-transform: translateX(100%);
  966. transform: translateX(100%);
  967. }
  968. }
  969. @keyframes slideToRight {
  970. to {
  971. -webkit-transform: translateX(100%);
  972. transform: translateX(100%);
  973. }
  974. }
  975. @-webkit-keyframes slideFromBottom {
  976. from {
  977. -webkit-transform: translateY(100%);
  978. transform: translateY(100%);
  979. }
  980. }
  981. @keyframes slideFromBottom {
  982. from {
  983. -webkit-transform: translateY(100%);
  984. transform: translateY(100%);
  985. }
  986. }
  987. @-webkit-keyframes slideToBottom {
  988. to {
  989. -webkit-transform: translateY(100%);
  990. transform: translateY(100%);
  991. }
  992. }
  993. @keyframes slideToBottom {
  994. to {
  995. -webkit-transform: translateY(100%);
  996. transform: translateY(100%);
  997. }
  998. }
  999. @-webkit-keyframes slideFromLeft {
  1000. from {
  1001. -webkit-transform: translateX(-100%);
  1002. transform: translateX(-100%);
  1003. }
  1004. }
  1005. @keyframes slideFromLeft {
  1006. from {
  1007. -webkit-transform: translateX(-100%);
  1008. transform: translateX(-100%);
  1009. }
  1010. }
  1011. @-webkit-keyframes slideToLeft {
  1012. to {
  1013. -webkit-transform: translateX(-100%);
  1014. transform: translateX(-100%);
  1015. }
  1016. }
  1017. @keyframes slideToLeft {
  1018. to {
  1019. -webkit-transform: translateX(-100%);
  1020. transform: translateX(-100%);
  1021. }
  1022. }