animsition.css 39 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522
  1. .animsition,
  2. .animsition-overlay {
  3. position: relative;
  4. opacity: 0;
  5. -webkit-animation-fill-mode: both;
  6. animation-fill-mode: both; }
  7. .animsition-loading {
  8. position: fixed;
  9. -webkit-animation-fill-mode: both;
  10. animation-fill-mode: both;
  11. top: 0;
  12. width: 100%;
  13. height: 100%;
  14. z-index: 100;
  15. background: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2032%2032%22%20width%3D%2232%22%20height%3D%2232%22%20fill%3D%22%23ccc%22%3E%0A%20%20%3Cpath%20opacity%3D%22.25%22%20d%3D%22M16%200%20A16%2016%200%200%200%2016%2032%20A16%2016%200%200%200%2016%200%20M16%204%20A12%2012%200%200%201%2016%2028%20A12%2012%200%200%201%2016%204%22/%3E%0A%20%20%3Cpath%20d%3D%22M16%200%20A16%2016%200%200%201%2032%2016%20L28%2016%20A12%2012%200%200%200%2016%204z%22%3E%0A%20%20%20%20%3CanimateTransform%20attributeName%3D%22transform%22%20type%3D%22rotate%22%20from%3D%220%2016%2016%22%20to%3D%22360%2016%2016%22%20dur%3D%220.8s%22%20repeatCount%3D%22indefinite%22%20/%3E%0A%20%20%3C/path%3E%0A%3C/svg%3E%0A%0A) center center no-repeat; }
  16. .animsition-loading:after {
  17. content: "Loading";
  18. color: #aaa;
  19. font-size: 16px;
  20. top: 50%;
  21. position: fixed;
  22. text-align: center;
  23. width: 100%;
  24. margin-top: 20px; }
  25. .animsition-overlay-slide {
  26. position: fixed;
  27. height: 100%;
  28. width: 100%;
  29. z-index: 1;
  30. background-color: #ddd; }
  31. .animsition,
  32. .animsition-overlay {
  33. position: relative;
  34. opacity: 0;
  35. -webkit-animation-fill-mode: both;
  36. animation-fill-mode: both; }
  37. /**
  38. * overlay option
  39. */
  40. .animsition-overlay-slide {
  41. position: fixed;
  42. z-index: 1;
  43. width: 100%;
  44. height: 100%;
  45. background-color: #ddd; }
  46. /* loading option */
  47. .animsition-loading,
  48. .animsition-loading:after {
  49. width: 32px;
  50. height: 32px;
  51. position: fixed;
  52. top: 50%;
  53. left: 50%;
  54. margin-top: -16px;
  55. margin-left: -16px;
  56. border-radius: 50%;
  57. z-index: 100; }
  58. .animsition-loading {
  59. background-color: transparent;
  60. border-top: 5px solid rgba(0, 0, 0, 0.2);
  61. border-right: 5px solid rgba(0, 0, 0, 0.2);
  62. border-bottom: 5px solid rgba(0, 0, 0, 0.2);
  63. border-left: 5px solid #eee;
  64. -webkit-transform: translateZ(0);
  65. transform: translateZ(0);
  66. -webkit-animation-iteration-count: infinite;
  67. animation-iteration-count: infinite;
  68. -webkit-animation-timing-function: linear;
  69. animation-timing-function: linear;
  70. -webkit-animation-duration: .8s;
  71. animation-duration: .8s;
  72. -webkit-animation-name: animsition-loading;
  73. animation-name: animsition-loading; }
  74. @-webkit-keyframes animsition-loading {
  75. 0% {
  76. -webkit-transform: rotate(0deg);
  77. transform: rotate(0deg); }
  78. 100% {
  79. -webkit-transform: rotate(360deg);
  80. transform: rotate(360deg); } }
  81. @keyframes animsition-loading {
  82. 0% {
  83. -webkit-transform: rotate(0deg);
  84. transform: rotate(0deg); }
  85. 100% {
  86. -webkit-transform: rotate(360deg);
  87. transform: rotate(360deg); } }
  88. @-webkit-keyframes fade-in {
  89. 0% {
  90. opacity: 0; }
  91. 100% {
  92. opacity: 1; } }
  93. @keyframes fade-in {
  94. 0% {
  95. opacity: 0; }
  96. 100% {
  97. opacity: 1; } }
  98. .fade-in {
  99. -webkit-animation-name: fade-in;
  100. animation-name: fade-in; }
  101. @-webkit-keyframes fade-out {
  102. 0% {
  103. opacity: 1; }
  104. 100% {
  105. opacity: 0; } }
  106. @keyframes fade-out {
  107. 0% {
  108. opacity: 1; }
  109. 100% {
  110. opacity: 0; } }
  111. .fade-out {
  112. -webkit-animation-name: fade-out;
  113. animation-name: fade-out; }
  114. @-webkit-keyframes fade-in-up {
  115. 0% {
  116. opacity: 0;
  117. -webkit-transform: translateY(500px);
  118. transform: translateY(500px); }
  119. 100% {
  120. opacity: 1;
  121. -webkit-transform: translateY(0);
  122. transform: translateY(0); } }
  123. @keyframes fade-in-up {
  124. 0% {
  125. opacity: 0;
  126. -webkit-transform: translateY(500px);
  127. transform: translateY(500px); }
  128. 100% {
  129. opacity: 1;
  130. -webkit-transform: translateY(0);
  131. transform: translateY(0); } }
  132. .fade-in-up {
  133. -webkit-animation-name: fade-in-up;
  134. animation-name: fade-in-up; }
  135. @-webkit-keyframes fade-out-up {
  136. 0% {
  137. opacity: 1;
  138. -webkit-transform: translateY(0);
  139. transform: translateY(0); }
  140. 100% {
  141. opacity: 0;
  142. -webkit-transform: translateY(-500px);
  143. transform: translateY(-500px); } }
  144. @keyframes fade-out-up {
  145. 0% {
  146. opacity: 1;
  147. -webkit-transform: translateY(0);
  148. transform: translateY(0); }
  149. 100% {
  150. opacity: 0;
  151. -webkit-transform: translateY(-500px);
  152. transform: translateY(-500px); } }
  153. .fade-out-up {
  154. -webkit-animation-name: fade-out-up;
  155. animation-name: fade-out-up; }
  156. @-webkit-keyframes fade-in-up-sm {
  157. 0% {
  158. opacity: 0;
  159. -webkit-transform: translateY(100px);
  160. transform: translateY(100px); }
  161. 100% {
  162. opacity: 1;
  163. -webkit-transform: translateY(0);
  164. transform: translateY(0); } }
  165. @keyframes fade-in-up-sm {
  166. 0% {
  167. opacity: 0;
  168. -webkit-transform: translateY(100px);
  169. transform: translateY(100px); }
  170. 100% {
  171. opacity: 1;
  172. -webkit-transform: translateY(0);
  173. transform: translateY(0); } }
  174. .fade-in-up-sm {
  175. -webkit-animation-name: fade-in-up-sm;
  176. animation-name: fade-in-up-sm; }
  177. @-webkit-keyframes fade-out-up-sm {
  178. 0% {
  179. opacity: 1;
  180. -webkit-transform: translateY(0);
  181. transform: translateY(0); }
  182. 100% {
  183. opacity: 0;
  184. -webkit-transform: translateY(-100px);
  185. transform: translateY(-100px); } }
  186. @keyframes fade-out-up-sm {
  187. 0% {
  188. opacity: 1;
  189. -webkit-transform: translateY(0);
  190. transform: translateY(0); }
  191. 100% {
  192. opacity: 0;
  193. -webkit-transform: translateY(-100px);
  194. transform: translateY(-100px); } }
  195. .fade-out-up-sm {
  196. -webkit-animation-name: fade-out-up-sm;
  197. animation-name: fade-out-up-sm; }
  198. @-webkit-keyframes fade-in-up-lg {
  199. 0% {
  200. opacity: 0;
  201. -webkit-transform: translateY(1000px);
  202. transform: translateY(1000px); }
  203. 100% {
  204. opacity: 1;
  205. -webkit-transform: translateY(0);
  206. transform: translateY(0); } }
  207. @keyframes fade-in-up-lg {
  208. 0% {
  209. opacity: 0;
  210. -webkit-transform: translateY(1000px);
  211. transform: translateY(1000px); }
  212. 100% {
  213. opacity: 1;
  214. -webkit-transform: translateY(0);
  215. transform: translateY(0); } }
  216. .fade-in-up-lg {
  217. -webkit-animation-name: fade-in-up-lg;
  218. animation-name: fade-in-up-lg; }
  219. @-webkit-keyframes fade-out-up-lg {
  220. 0% {
  221. opacity: 1;
  222. -webkit-transform: translateY(0);
  223. transform: translateY(0); }
  224. 100% {
  225. opacity: 0;
  226. -webkit-transform: translateY(-1000px);
  227. transform: translateY(-1000px); } }
  228. @keyframes fade-out-up-lg {
  229. 0% {
  230. opacity: 1;
  231. -webkit-transform: translateY(0);
  232. transform: translateY(0); }
  233. 100% {
  234. opacity: 0;
  235. -webkit-transform: translateY(-1000px);
  236. transform: translateY(-1000px); } }
  237. .fade-out-up-lg {
  238. -webkit-animation-name: fade-out-up-lg;
  239. animation-name: fade-out-up-lg; }
  240. @-webkit-keyframes fade-in-down {
  241. 0% {
  242. opacity: 0;
  243. -webkit-transform: translateY(-500px);
  244. transform: translateY(-500px); }
  245. 100% {
  246. opacity: 1;
  247. -webkit-transform: translateY(0);
  248. transform: translateY(0); } }
  249. @keyframes fade-in-down {
  250. 0% {
  251. opacity: 0;
  252. -webkit-transform: translateY(-500px);
  253. transform: translateY(-500px); }
  254. 100% {
  255. opacity: 1;
  256. -webkit-transform: translateY(0);
  257. transform: translateY(0); } }
  258. .fade-in-down {
  259. -webkit-animation-name: fade-in-down;
  260. animation-name: fade-in-down; }
  261. @-webkit-keyframes fade-out-down {
  262. 0% {
  263. opacity: 1;
  264. -webkit-transform: translateY(0);
  265. transform: translateY(0); }
  266. 100% {
  267. opacity: 0;
  268. -webkit-transform: translateY(500px);
  269. transform: translateY(500px); } }
  270. @keyframes fade-out-down {
  271. 0% {
  272. opacity: 1;
  273. -webkit-transform: translateY(0);
  274. transform: translateY(0); }
  275. 100% {
  276. opacity: 0;
  277. -webkit-transform: translateY(500px);
  278. transform: translateY(500px); } }
  279. .fade-out-down {
  280. -webkit-animation-name: fade-out-down;
  281. animation-name: fade-out-down; }
  282. @-webkit-keyframes fade-in-down-sm {
  283. 0% {
  284. opacity: 0;
  285. -webkit-transform: translateY(-100px);
  286. transform: translateY(-100px); }
  287. 100% {
  288. opacity: 1;
  289. -webkit-transform: translateY(0);
  290. transform: translateY(0); } }
  291. @keyframes fade-in-down-sm {
  292. 0% {
  293. opacity: 0;
  294. -webkit-transform: translateY(-100px);
  295. transform: translateY(-100px); }
  296. 100% {
  297. opacity: 1;
  298. -webkit-transform: translateY(0);
  299. transform: translateY(0); } }
  300. .fade-in-down-sm {
  301. -webkit-animation-name: fade-in-down-sm;
  302. animation-name: fade-in-down-sm; }
  303. @-webkit-keyframes fade-out-down-sm {
  304. 0% {
  305. opacity: 1;
  306. -webkit-transform: translateY(0);
  307. transform: translateY(0); }
  308. 100% {
  309. opacity: 0;
  310. -webkit-transform: translateY(100px);
  311. transform: translateY(100px); } }
  312. @keyframes fade-out-down-sm {
  313. 0% {
  314. opacity: 1;
  315. -webkit-transform: translateY(0);
  316. transform: translateY(0); }
  317. 100% {
  318. opacity: 0;
  319. -webkit-transform: translateY(100px);
  320. transform: translateY(100px); } }
  321. .fade-out-down-sm {
  322. -webkit-animation-name: fade-out-down-sm;
  323. animation-name: fade-out-down-sm; }
  324. @-webkit-keyframes fade-in-down-lg {
  325. 0% {
  326. opacity: 0;
  327. -webkit-transform: translateY(-1000px);
  328. transform: translateY(-1000px); }
  329. 100% {
  330. opacity: 1;
  331. -webkit-transform: translateY(0);
  332. transform: translateY(0); } }
  333. @keyframes fade-in-down-lg {
  334. 0% {
  335. opacity: 0;
  336. -webkit-transform: translateY(-1000px);
  337. transform: translateY(-1000px); }
  338. 100% {
  339. opacity: 1;
  340. -webkit-transform: translateY(0);
  341. transform: translateY(0); } }
  342. .fade-in-down-lg {
  343. -webkit-animation-name: fade-in-down;
  344. animation-name: fade-in-down; }
  345. @-webkit-keyframes fade-out-down-lg {
  346. 0% {
  347. opacity: 1;
  348. -webkit-transform: translateY(0);
  349. transform: translateY(0); }
  350. 100% {
  351. opacity: 0;
  352. -webkit-transform: translateY(1000px);
  353. transform: translateY(1000px); } }
  354. @keyframes fade-out-down-lg {
  355. 0% {
  356. opacity: 1;
  357. -webkit-transform: translateY(0);
  358. transform: translateY(0); }
  359. 100% {
  360. opacity: 0;
  361. -webkit-transform: translateY(1000px);
  362. transform: translateY(1000px); } }
  363. .fade-out-down-lg {
  364. -webkit-animation-name: fade-out-down-lg;
  365. animation-name: fade-out-down-lg; }
  366. @-webkit-keyframes fade-in-left {
  367. 0% {
  368. opacity: 0;
  369. -webkit-transform: translateX(-500px);
  370. transform: translateX(-500px); }
  371. 100% {
  372. opacity: 1;
  373. -webkit-transform: translateX(0);
  374. transform: translateX(0); } }
  375. @keyframes fade-in-left {
  376. 0% {
  377. opacity: 0;
  378. -webkit-transform: translateX(-500px);
  379. transform: translateX(-500px); }
  380. 100% {
  381. opacity: 1;
  382. -webkit-transform: translateX(0);
  383. transform: translateX(0); } }
  384. .fade-in-left {
  385. -webkit-animation-name: fade-in-left;
  386. animation-name: fade-in-left; }
  387. @-webkit-keyframes fade-out-left {
  388. 0% {
  389. opacity: 1;
  390. -webkit-transform: translateX(0);
  391. transform: translateX(0); }
  392. 100% {
  393. opacity: 0;
  394. -webkit-transform: translateX(-500px);
  395. transform: translateX(-500px); } }
  396. @keyframes fade-out-left {
  397. 0% {
  398. opacity: 1;
  399. -webkit-transform: translateX(0);
  400. transform: translateX(0); }
  401. 100% {
  402. opacity: 0;
  403. -webkit-transform: translateX(-500px);
  404. transform: translateX(-500px); } }
  405. .fade-out-left {
  406. -webkit-animation-name: fade-out-left;
  407. animation-name: fade-out-left; }
  408. @-webkit-keyframes fade-in-left-sm {
  409. 0% {
  410. opacity: 0;
  411. -webkit-transform: translateX(-100px);
  412. transform: translateX(-100px); }
  413. 100% {
  414. opacity: 1;
  415. -webkit-transform: translateX(0);
  416. transform: translateX(0); } }
  417. @keyframes fade-in-left-sm {
  418. 0% {
  419. opacity: 0;
  420. -webkit-transform: translateX(-100px);
  421. transform: translateX(-100px); }
  422. 100% {
  423. opacity: 1;
  424. -webkit-transform: translateX(0);
  425. transform: translateX(0); } }
  426. .fade-in-left-sm {
  427. -webkit-animation-name: fade-in-left-sm;
  428. animation-name: fade-in-left-sm; }
  429. @-webkit-keyframes fade-out-left-sm {
  430. 0% {
  431. opacity: 1;
  432. -webkit-transform: translateX(0);
  433. transform: translateX(0); }
  434. 100% {
  435. opacity: 0;
  436. -webkit-transform: translateX(-100px);
  437. transform: translateX(-100px); } }
  438. @keyframes fade-out-left-sm {
  439. 0% {
  440. opacity: 1;
  441. -webkit-transform: translateX(0);
  442. transform: translateX(0); }
  443. 100% {
  444. opacity: 0;
  445. -webkit-transform: translateX(-100px);
  446. transform: translateX(-100px); } }
  447. .fade-out-left-sm {
  448. -webkit-animation-name: fade-out-left-sm;
  449. animation-name: fade-out-left-sm; }
  450. @-webkit-keyframes fade-in-left-lg {
  451. 0% {
  452. opacity: 0;
  453. -webkit-transform: translateX(-1500px);
  454. transform: translateX(-1500px); }
  455. 100% {
  456. opacity: 1;
  457. -webkit-transform: translateX(0);
  458. transform: translateX(0); } }
  459. @keyframes fade-in-left-lg {
  460. 0% {
  461. opacity: 0;
  462. -webkit-transform: translateX(-1500px);
  463. transform: translateX(-1500px); }
  464. 100% {
  465. opacity: 1;
  466. -webkit-transform: translateX(0);
  467. transform: translateX(0); } }
  468. .fade-in-left-lg {
  469. -webkit-animation-name: fade-in-left-lg;
  470. animation-name: fade-in-left-lg; }
  471. @-webkit-keyframes fade-out-left-lg {
  472. 0% {
  473. opacity: 1;
  474. -webkit-transform: translateX(0);
  475. transform: translateX(0); }
  476. 100% {
  477. opacity: 0;
  478. -webkit-transform: translateX(-1500px);
  479. transform: translateX(-1500px); } }
  480. @keyframes fade-out-left-lg {
  481. 0% {
  482. opacity: 1;
  483. -webkit-transform: translateX(0);
  484. transform: translateX(0); }
  485. 100% {
  486. opacity: 0;
  487. -webkit-transform: translateX(-1500px);
  488. transform: translateX(-1500px); } }
  489. .fade-out-left-lg {
  490. -webkit-animation-name: fade-out-left-lg;
  491. animation-name: fade-out-left-lg; }
  492. @-webkit-keyframes fade-in-right {
  493. 0% {
  494. opacity: 0;
  495. -webkit-transform: translateX(500px);
  496. transform: translateX(500px); }
  497. 100% {
  498. opacity: 1;
  499. -webkit-transform: translateX(0);
  500. transform: translateX(0); } }
  501. @keyframes fade-in-right {
  502. 0% {
  503. opacity: 0;
  504. -webkit-transform: translateX(500px);
  505. transform: translateX(500px); }
  506. 100% {
  507. opacity: 1;
  508. -webkit-transform: translateX(0);
  509. transform: translateX(0); } }
  510. .fade-in-right {
  511. -webkit-animation-name: fade-in-right;
  512. animation-name: fade-in-right; }
  513. @-webkit-keyframes fade-out-right {
  514. 0% {
  515. opacity: 1;
  516. -webkit-transform: translateX(0);
  517. transform: translateX(0); }
  518. 100% {
  519. opacity: 0;
  520. -webkit-transform: translateX(500px);
  521. transform: translateX(500px); } }
  522. @keyframes fade-out-right {
  523. 0% {
  524. opacity: 1;
  525. -webkit-transform: translateX(0);
  526. transform: translateX(0); }
  527. 100% {
  528. opacity: 0;
  529. -webkit-transform: translateX(500px);
  530. transform: translateX(500px); } }
  531. .fade-out-right {
  532. -webkit-animation-name: fade-out-right;
  533. animation-name: fade-out-right; }
  534. @-webkit-keyframes fade-in-right-sm {
  535. 0% {
  536. opacity: 0;
  537. -webkit-transform: translateX(100px);
  538. transform: translateX(100px); }
  539. 100% {
  540. opacity: 1;
  541. -webkit-transform: translateX(0);
  542. transform: translateX(0); } }
  543. @keyframes fade-in-right-sm {
  544. 0% {
  545. opacity: 0;
  546. -webkit-transform: translateX(100px);
  547. transform: translateX(100px); }
  548. 100% {
  549. opacity: 1;
  550. -webkit-transform: translateX(0);
  551. transform: translateX(0); } }
  552. .fade-in-right-sm {
  553. -webkit-animation-name: fade-in-right-sm;
  554. animation-name: fade-in-right-sm; }
  555. @-webkit-keyframes fade-out-right-sm {
  556. 0% {
  557. opacity: 1;
  558. -webkit-transform: translateX(0);
  559. transform: translateX(0); }
  560. 100% {
  561. opacity: 0;
  562. -webkit-transform: translateX(100px);
  563. transform: translateX(100px); } }
  564. @keyframes fade-out-right-sm {
  565. 0% {
  566. opacity: 1;
  567. -webkit-transform: translateX(0);
  568. transform: translateX(0); }
  569. 100% {
  570. opacity: 0;
  571. -webkit-transform: translateX(100px);
  572. transform: translateX(100px); } }
  573. .fade-out-right-sm {
  574. -webkit-animation-name: fade-out-right-sm;
  575. animation-name: fade-out-right-sm; }
  576. @-webkit-keyframes fade-in-right-lg {
  577. 0% {
  578. opacity: 0;
  579. -webkit-transform: translateX(1500px);
  580. transform: translateX(1500px); }
  581. 100% {
  582. opacity: 1;
  583. -webkit-transform: translateX(0);
  584. transform: translateX(0); } }
  585. @keyframes fade-in-right-lg {
  586. 0% {
  587. opacity: 0;
  588. -webkit-transform: translateX(1500px);
  589. transform: translateX(1500px); }
  590. 100% {
  591. opacity: 1;
  592. -webkit-transform: translateX(0);
  593. transform: translateX(0); } }
  594. .fade-in-right-lg {
  595. -webkit-animation-name: fade-in-right-lg;
  596. animation-name: fade-in-right-lg; }
  597. @-webkit-keyframes fade-out-right-lg {
  598. 0% {
  599. opacity: 1;
  600. -webkit-transform: translateX(0);
  601. transform: translateX(0); }
  602. 100% {
  603. opacity: 0;
  604. -webkit-transform: translateX(1500px);
  605. transform: translateX(1500px); } }
  606. @keyframes fade-out-right-lg {
  607. 0% {
  608. opacity: 1;
  609. -webkit-transform: translateX(0);
  610. transform: translateX(0); }
  611. 100% {
  612. opacity: 0;
  613. -webkit-transform: translateX(1500px);
  614. transform: translateX(1500px); } }
  615. .fade-out-right-lg {
  616. -webkit-animation-name: fade-out-right-lg;
  617. animation-name: fade-out-right-lg; }
  618. @-webkit-keyframes rotate-in {
  619. 0% {
  620. opacity: 0;
  621. -webkit-transform: rotate(-90deg);
  622. transform: rotate(-90deg);
  623. -webkit-transform-origin: center center;
  624. transform-origin: center center; }
  625. 100% {
  626. opacity: 1;
  627. -webkit-transform: rotate(0);
  628. transform: rotate(0);
  629. -webkit-transform-origin: center center;
  630. transform-origin: center center; } }
  631. @keyframes rotate-in {
  632. 0% {
  633. opacity: 0;
  634. -webkit-transform: rotate(-90deg);
  635. transform: rotate(-90deg);
  636. -webkit-transform-origin: center center;
  637. transform-origin: center center; }
  638. 100% {
  639. opacity: 1;
  640. -webkit-transform: rotate(0);
  641. transform: rotate(0);
  642. -webkit-transform-origin: center center;
  643. transform-origin: center center; } }
  644. .rotate-in {
  645. -webkit-animation-name: rotate-in;
  646. animation-name: rotate-in; }
  647. @-webkit-keyframes rotate-out {
  648. 0% {
  649. opacity: 1;
  650. -webkit-transform: rotate(0);
  651. transform: rotate(0);
  652. -webkit-transform-origin: center center;
  653. transform-origin: center center; }
  654. 100% {
  655. opacity: 0;
  656. -webkit-transform: rotate(90deg);
  657. transform: rotate(90deg);
  658. -webkit-transform-origin: center center;
  659. transform-origin: center center; } }
  660. @keyframes rotate-out {
  661. 0% {
  662. opacity: 1;
  663. -webkit-transform: rotate(0);
  664. transform: rotate(0);
  665. -webkit-transform-origin: center center;
  666. transform-origin: center center; }
  667. 100% {
  668. opacity: 0;
  669. -webkit-transform: rotate(90deg);
  670. transform: rotate(90deg);
  671. -webkit-transform-origin: center center;
  672. transform-origin: center center; } }
  673. .rotate-out {
  674. -webkit-animation-name: rotate-out;
  675. animation-name: rotate-out; }
  676. @-webkit-keyframes rotate-in-sm {
  677. 0% {
  678. opacity: 0;
  679. -webkit-transform: rotate(-45deg);
  680. transform: rotate(-45deg);
  681. -webkit-transform-origin: center center;
  682. transform-origin: center center; }
  683. 100% {
  684. opacity: 1;
  685. -webkit-transform: rotate(0);
  686. transform: rotate(0);
  687. -webkit-transform-origin: center center;
  688. transform-origin: center center; } }
  689. @keyframes rotate-in-sm {
  690. 0% {
  691. opacity: 0;
  692. -webkit-transform: rotate(-45deg);
  693. transform: rotate(-45deg);
  694. -webkit-transform-origin: center center;
  695. transform-origin: center center; }
  696. 100% {
  697. opacity: 1;
  698. -webkit-transform: rotate(0);
  699. transform: rotate(0);
  700. -webkit-transform-origin: center center;
  701. transform-origin: center center; } }
  702. .rotate-in-sm {
  703. -webkit-animation-name: rotate-in-sm;
  704. animation-name: rotate-in-sm; }
  705. @-webkit-keyframes rotate-out-sm {
  706. 0% {
  707. opacity: 1;
  708. -webkit-transform: rotate(0);
  709. transform: rotate(0);
  710. -webkit-transform-origin: center center;
  711. transform-origin: center center; }
  712. 100% {
  713. opacity: 0;
  714. -webkit-transform: rotate(45deg);
  715. transform: rotate(45deg);
  716. -webkit-transform-origin: center center;
  717. transform-origin: center center; } }
  718. @keyframes rotate-out-sm {
  719. 0% {
  720. opacity: 1;
  721. -webkit-transform: rotate(0);
  722. transform: rotate(0);
  723. -webkit-transform-origin: center center;
  724. transform-origin: center center; }
  725. 100% {
  726. opacity: 0;
  727. -webkit-transform: rotate(45deg);
  728. transform: rotate(45deg);
  729. -webkit-transform-origin: center center;
  730. transform-origin: center center; } }
  731. .rotate-out-sm {
  732. -webkit-animation-name: rotate-out-sm;
  733. animation-name: rotate-out-sm; }
  734. @-webkit-keyframes rotate-in-lg {
  735. 0% {
  736. opacity: 0;
  737. -webkit-transform: rotate(-180deg);
  738. transform: rotate(-180deg);
  739. -webkit-transform-origin: center center;
  740. transform-origin: center center; }
  741. 100% {
  742. opacity: 1;
  743. -webkit-transform: rotate(0);
  744. transform: rotate(0);
  745. -webkit-transform-origin: center center;
  746. transform-origin: center center; } }
  747. @keyframes rotate-in-lg {
  748. 0% {
  749. opacity: 0;
  750. -webkit-transform: rotate(-180deg);
  751. transform: rotate(-180deg);
  752. -webkit-transform-origin: center center;
  753. transform-origin: center center; }
  754. 100% {
  755. opacity: 1;
  756. -webkit-transform: rotate(0);
  757. transform: rotate(0);
  758. -webkit-transform-origin: center center;
  759. transform-origin: center center; } }
  760. .rotate-in-lg {
  761. -webkit-animation-name: rotate-in-lg;
  762. animation-name: rotate-in-lg; }
  763. @-webkit-keyframes rotate-out-lg {
  764. 0% {
  765. opacity: 1;
  766. -webkit-transform: rotate(0);
  767. transform: rotate(0);
  768. -webkit-transform-origin: center center;
  769. transform-origin: center center; }
  770. 100% {
  771. opacity: 0;
  772. -webkit-transform: rotate(180deg);
  773. transform: rotate(180deg);
  774. -webkit-transform-origin: center center;
  775. transform-origin: center center; } }
  776. @keyframes rotate-out-lg {
  777. 0% {
  778. opacity: 1;
  779. -webkit-transform: rotate(0);
  780. transform: rotate(0);
  781. -webkit-transform-origin: center center;
  782. transform-origin: center center; }
  783. 100% {
  784. opacity: 0;
  785. -webkit-transform: rotate(180deg);
  786. transform: rotate(180deg);
  787. -webkit-transform-origin: center center;
  788. transform-origin: center center; } }
  789. .rotate-out-lg {
  790. -webkit-animation-name: rotate-out-lg;
  791. animation-name: rotate-out-lg; }
  792. @-webkit-keyframes flip-in-x {
  793. 0% {
  794. opacity: 0;
  795. -webkit-transform: perspective(550px) rotateX(90deg);
  796. transform: perspective(550px) rotateX(90deg); }
  797. 100% {
  798. opacity: 1;
  799. -webkit-transform: perspective(550px) rotateX(0deg);
  800. transform: perspective(550px) rotateX(0deg); } }
  801. @keyframes flip-in-x {
  802. 0% {
  803. opacity: 0;
  804. -webkit-transform: perspective(550px) rotateX(90deg);
  805. transform: perspective(550px) rotateX(90deg); }
  806. 100% {
  807. opacity: 1;
  808. -webkit-transform: perspective(550px) rotateX(0deg);
  809. transform: perspective(550px) rotateX(0deg); } }
  810. .flip-in-x {
  811. -webkit-animation-name: flip-in-x;
  812. animation-name: flip-in-x;
  813. -webkit-backface-visibility: visible !important;
  814. backface-visibility: visible !important; }
  815. @-webkit-keyframes flip-out-x {
  816. 0% {
  817. opacity: 1;
  818. -webkit-transform: perspective(550px) rotateX(0deg);
  819. transform: perspective(550px) rotateX(0deg); }
  820. 100% {
  821. opacity: 0;
  822. -webkit-transform: perspective(550px) rotateX(90deg);
  823. transform: perspective(550px) rotateX(90deg); } }
  824. @keyframes flip-out-x {
  825. 0% {
  826. opacity: 1;
  827. -webkit-transform: perspective(550px) rotateX(0deg);
  828. transform: perspective(550px) rotateX(0deg); }
  829. 100% {
  830. opacity: 0;
  831. -webkit-transform: perspective(550px) rotateX(90deg);
  832. transform: perspective(550px) rotateX(90deg); } }
  833. .flip-out-x {
  834. -webkit-animation-name: flip-out-x;
  835. animation-name: flip-out-x;
  836. -webkit-backface-visibility: visible !important;
  837. backface-visibility: visible !important; }
  838. @-webkit-keyframes flip-in-x-nr {
  839. 0% {
  840. opacity: 0;
  841. -webkit-transform: perspective(100px) rotateX(90deg);
  842. transform: perspective(100px) rotateX(90deg); }
  843. 100% {
  844. opacity: 1;
  845. -webkit-transform: perspective(100px) rotateX(0deg);
  846. transform: perspective(100px) rotateX(0deg); } }
  847. @keyframes flip-in-x-nr {
  848. 0% {
  849. opacity: 0;
  850. -webkit-transform: perspective(100px) rotateX(90deg);
  851. transform: perspective(100px) rotateX(90deg); }
  852. 100% {
  853. opacity: 1;
  854. -webkit-transform: perspective(100px) rotateX(0deg);
  855. transform: perspective(100px) rotateX(0deg); } }
  856. .flip-in-x-nr {
  857. -webkit-animation-name: flip-in-x-nr;
  858. animation-name: flip-in-x-nr;
  859. -webkit-backface-visibility: visible !important;
  860. backface-visibility: visible !important; }
  861. @-webkit-keyframes flip-out-x-nr {
  862. 0% {
  863. opacity: 1;
  864. -webkit-transform: perspective(100px) rotateX(0deg);
  865. transform: perspective(100px) rotateX(0deg); }
  866. 100% {
  867. opacity: 0;
  868. -webkit-transform: perspective(100px) rotateX(90deg);
  869. transform: perspective(100px) rotateX(90deg); } }
  870. @keyframes flip-out-x-nr {
  871. 0% {
  872. opacity: 1;
  873. -webkit-transform: perspective(100px) rotateX(0deg);
  874. transform: perspective(100px) rotateX(0deg); }
  875. 100% {
  876. opacity: 0;
  877. -webkit-transform: perspective(100px) rotateX(90deg);
  878. transform: perspective(100px) rotateX(90deg); } }
  879. .flip-out-x-nr {
  880. -webkit-animation-name: flip-out-x-nr;
  881. animation-name: flip-out-x-nr;
  882. -webkit-backface-visibility: visible !important;
  883. backface-visibility: visible !important; }
  884. @-webkit-keyframes flip-in-x-fr {
  885. 0% {
  886. opacity: 0;
  887. -webkit-transform: perspective(1000px) rotateX(90deg);
  888. transform: perspective(1000px) rotateX(90deg); }
  889. 100% {
  890. opacity: 1;
  891. -webkit-transform: perspective(1000px) rotateX(0deg);
  892. transform: perspective(1000px) rotateX(0deg); } }
  893. @keyframes flip-in-x-fr {
  894. 0% {
  895. opacity: 0;
  896. -webkit-transform: perspective(1000px) rotateX(90deg);
  897. transform: perspective(1000px) rotateX(90deg); }
  898. 100% {
  899. opacity: 1;
  900. -webkit-transform: perspective(1000px) rotateX(0deg);
  901. transform: perspective(1000px) rotateX(0deg); } }
  902. .flip-in-x-fr {
  903. -webkit-animation-name: flip-in-x-fr;
  904. animation-name: flip-in-x-fr;
  905. -webkit-backface-visibility: visible !important;
  906. backface-visibility: visible !important; }
  907. @-webkit-keyframes flip-out-x-fr {
  908. 0% {
  909. opacity: 1;
  910. -webkit-transform: perspective(1000px) rotateX(0deg);
  911. transform: perspective(1000px) rotateX(0deg); }
  912. 100% {
  913. opacity: 0;
  914. -webkit-transform: perspective(1000px) rotateX(90deg);
  915. transform: perspective(1000px) rotateX(90deg); } }
  916. @keyframes flip-out-x-fr {
  917. 0% {
  918. opacity: 1;
  919. -webkit-transform: perspective(1000px) rotateX(0deg);
  920. transform: perspective(1000px) rotateX(0deg); }
  921. 100% {
  922. opacity: 0;
  923. -webkit-transform: perspective(1000px) rotateX(90deg);
  924. transform: perspective(1000px) rotateX(90deg); } }
  925. .flip-out-x-fr {
  926. -webkit-animation-name: flip-out-x-fr;
  927. animation-name: flip-out-x-fr;
  928. -webkit-backface-visibility: visible !important;
  929. backface-visibility: visible !important; }
  930. @-webkit-keyframes flip-in-y {
  931. 0% {
  932. -webkit-transform: perspective(550px) rotateY(90deg);
  933. transform: perspective(550px) rotateY(90deg);
  934. opacity: 0; }
  935. 100% {
  936. -webkit-transform: perspective(550px) rotateY(0deg);
  937. transform: perspective(550px) rotateY(0deg);
  938. opacity: 1; } }
  939. @keyframes flip-in-y {
  940. 0% {
  941. -webkit-transform: perspective(550px) rotateY(90deg);
  942. transform: perspective(550px) rotateY(90deg);
  943. opacity: 0; }
  944. 100% {
  945. -webkit-transform: perspective(550px) rotateY(0deg);
  946. transform: perspective(550px) rotateY(0deg);
  947. opacity: 1; } }
  948. .flip-in-y {
  949. -webkit-backface-visibility: visible !important;
  950. backface-visibility: visible !important;
  951. -webkit-animation-name: flip-in-y;
  952. animation-name: flip-in-y; }
  953. @-webkit-keyframes flip-out-y {
  954. 0% {
  955. -webkit-transform: perspective(550px) rotateY(0deg);
  956. transform: perspective(550px) rotateY(0deg);
  957. opacity: 1; }
  958. 100% {
  959. -webkit-transform: perspective(550px) rotateY(90deg);
  960. transform: perspective(550px) rotateY(90deg);
  961. opacity: 0; } }
  962. @keyframes flip-out-y {
  963. 0% {
  964. -webkit-transform: perspective(550px) rotateY(0deg);
  965. transform: perspective(550px) rotateY(0deg);
  966. opacity: 1; }
  967. 100% {
  968. -webkit-transform: perspective(550px) rotateY(90deg);
  969. transform: perspective(550px) rotateY(90deg);
  970. opacity: 0; } }
  971. .flip-out-y {
  972. -webkit-backface-visibility: visible !important;
  973. backface-visibility: visible !important;
  974. -webkit-animation-name: flip-out-y;
  975. animation-name: flip-out-y; }
  976. @-webkit-keyframes flip-in-y-nr {
  977. 0% {
  978. -webkit-transform: perspective(100px) rotateY(90deg);
  979. transform: perspective(100px) rotateY(90deg);
  980. opacity: 0; }
  981. 100% {
  982. -webkit-transform: perspective(100px) rotateY(0deg);
  983. transform: perspective(100px) rotateY(0deg);
  984. opacity: 1; } }
  985. @keyframes flip-in-y-nr {
  986. 0% {
  987. -webkit-transform: perspective(100px) rotateY(90deg);
  988. transform: perspective(100px) rotateY(90deg);
  989. opacity: 0; }
  990. 100% {
  991. -webkit-transform: perspective(100px) rotateY(0deg);
  992. transform: perspective(100px) rotateY(0deg);
  993. opacity: 1; } }
  994. .flip-in-y-nr {
  995. -webkit-animation-name: flip-in-y-nr;
  996. animation-name: flip-in-y-nr;
  997. -webkit-backface-visibility: visible !important;
  998. backface-visibility: visible !important; }
  999. @-webkit-keyframes flip-out-y-nr {
  1000. 0% {
  1001. -webkit-transform: perspective(100px) rotateY(0deg);
  1002. transform: perspective(100px) rotateY(0deg);
  1003. opacity: 1; }
  1004. 100% {
  1005. -webkit-transform: perspective(100px) rotateY(90deg);
  1006. transform: perspective(100px) rotateY(90deg);
  1007. opacity: 0; } }
  1008. @keyframes flip-out-y-nr {
  1009. 0% {
  1010. -webkit-transform: perspective(100px) rotateY(0deg);
  1011. transform: perspective(100px) rotateY(0deg);
  1012. opacity: 1; }
  1013. 100% {
  1014. -webkit-transform: perspective(100px) rotateY(90deg);
  1015. transform: perspective(100px) rotateY(90deg);
  1016. opacity: 0; } }
  1017. .flip-out-y-nr {
  1018. -webkit-animation-name: flip-out-y-nr;
  1019. animation-name: flip-out-y-nr;
  1020. -webkit-backface-visibility: visible !important;
  1021. backface-visibility: visible !important; }
  1022. @-webkit-keyframes flip-in-y-fr {
  1023. 0% {
  1024. -webkit-transform: perspective(1000px) rotateY(90deg);
  1025. transform: perspective(1000px) rotateY(90deg);
  1026. opacity: 0; }
  1027. 100% {
  1028. -webkit-transform: perspective(1000px) rotateY(0deg);
  1029. transform: perspective(1000px) rotateY(0deg);
  1030. opacity: 1; } }
  1031. @keyframes flip-in-y-fr {
  1032. 0% {
  1033. -webkit-transform: perspective(1000px) rotateY(90deg);
  1034. transform: perspective(1000px) rotateY(90deg);
  1035. opacity: 0; }
  1036. 100% {
  1037. -webkit-transform: perspective(1000px) rotateY(0deg);
  1038. transform: perspective(1000px) rotateY(0deg);
  1039. opacity: 1; } }
  1040. .flip-in-y-fr {
  1041. -webkit-animation-name: flip-in-y-fr;
  1042. animation-name: flip-in-y-fr;
  1043. -webkit-backface-visibility: visible !important;
  1044. backface-visibility: visible !important; }
  1045. @-webkit-keyframes flip-out-y-fr {
  1046. 0% {
  1047. -webkit-transform: perspective(1000px) rotateY(0deg);
  1048. transform: perspective(1000px) rotateY(0deg);
  1049. opacity: 1; }
  1050. 100% {
  1051. -webkit-transform: perspective(1000px) rotateY(90deg);
  1052. transform: perspective(1000px) rotateY(90deg);
  1053. opacity: 0; } }
  1054. @keyframes flip-out-y-fr {
  1055. 0% {
  1056. -webkit-transform: perspective(1000px) rotateY(0deg);
  1057. transform: perspective(1000px) rotateY(0deg);
  1058. opacity: 1; }
  1059. 100% {
  1060. -webkit-transform: perspective(1000px) rotateY(90deg);
  1061. transform: perspective(1000px) rotateY(90deg);
  1062. opacity: 0; } }
  1063. .flip-out-y-fr {
  1064. -webkit-animation-name: flip-out-y-fr;
  1065. animation-name: flip-out-y-fr;
  1066. -webkit-backface-visibility: visible !important;
  1067. backface-visibility: visible !important; }
  1068. @-webkit-keyframes zoom-in {
  1069. 0% {
  1070. opacity: 0;
  1071. -webkit-transform: scale(0.7);
  1072. transform: scale(0.7); }
  1073. 100% {
  1074. opacity: 1; } }
  1075. @keyframes zoom-in {
  1076. 0% {
  1077. opacity: 0;
  1078. -webkit-transform: scale(0.7);
  1079. transform: scale(0.7); }
  1080. 100% {
  1081. opacity: 1; } }
  1082. .zoom-in {
  1083. -webkit-animation-name: zoom-in;
  1084. animation-name: zoom-in; }
  1085. @-webkit-keyframes zoom-out {
  1086. 0% {
  1087. opacity: 1;
  1088. -webkit-transform: scale(1);
  1089. transform: scale(1); }
  1090. 50% {
  1091. opacity: 0;
  1092. -webkit-transform: scale(0.7);
  1093. transform: scale(0.7); }
  1094. 100% {
  1095. opacity: 0; } }
  1096. @keyframes zoom-out {
  1097. 0% {
  1098. opacity: 1;
  1099. -webkit-transform: scale(1);
  1100. transform: scale(1); }
  1101. 50% {
  1102. opacity: 0;
  1103. -webkit-transform: scale(0.7);
  1104. transform: scale(0.7); }
  1105. 100% {
  1106. opacity: 0; } }
  1107. .zoom-out {
  1108. -webkit-animation-name: zoom-out;
  1109. animation-name: zoom-out; }
  1110. @-webkit-keyframes zoom-in-sm {
  1111. 0% {
  1112. opacity: 0;
  1113. -webkit-transform: scale(0.95);
  1114. transform: scale(0.95); }
  1115. 100% {
  1116. opacity: 1; } }
  1117. @keyframes zoom-in-sm {
  1118. 0% {
  1119. opacity: 0;
  1120. -webkit-transform: scale(0.95);
  1121. transform: scale(0.95); }
  1122. 100% {
  1123. opacity: 1; } }
  1124. .zoom-in-sm {
  1125. -webkit-animation-name: zoom-in-sm;
  1126. animation-name: zoom-in-sm; }
  1127. @-webkit-keyframes zoom-out-sm {
  1128. 0% {
  1129. opacity: 1;
  1130. -webkit-transform: scale(1);
  1131. transform: scale(1); }
  1132. 50% {
  1133. opacity: 0;
  1134. -webkit-transform: scale(0.95);
  1135. transform: scale(0.95); }
  1136. 100% {
  1137. opacity: 0; } }
  1138. @keyframes zoom-out-sm {
  1139. 0% {
  1140. opacity: 1;
  1141. -webkit-transform: scale(1);
  1142. transform: scale(1); }
  1143. 50% {
  1144. opacity: 0;
  1145. -webkit-transform: scale(0.95);
  1146. transform: scale(0.95); }
  1147. 100% {
  1148. opacity: 0; } }
  1149. .zoom-out-sm {
  1150. -webkit-animation-name: zoom-out-sm;
  1151. animation-name: zoom-out-sm; }
  1152. @-webkit-keyframes zoom-in-lg {
  1153. 0% {
  1154. opacity: 0;
  1155. -webkit-transform: scale(0.4);
  1156. transform: scale(0.4); }
  1157. 100% {
  1158. opacity: 1; } }
  1159. @keyframes zoom-in-lg {
  1160. 0% {
  1161. opacity: 0;
  1162. -webkit-transform: scale(0.4);
  1163. transform: scale(0.4); }
  1164. 100% {
  1165. opacity: 1; } }
  1166. .zoom-in-lg {
  1167. -webkit-animation-name: zoom-in-lg;
  1168. animation-name: zoom-in-lg; }
  1169. @-webkit-keyframes zoom-out-lg {
  1170. 0% {
  1171. opacity: 1;
  1172. -webkit-transform: scale(1);
  1173. transform: scale(1); }
  1174. 50% {
  1175. opacity: 0;
  1176. -webkit-transform: scale(0.4);
  1177. transform: scale(0.4); }
  1178. 100% {
  1179. opacity: 0; } }
  1180. @keyframes zoom-out-lg {
  1181. 0% {
  1182. opacity: 1;
  1183. -webkit-transform: scale(1);
  1184. transform: scale(1); }
  1185. 50% {
  1186. opacity: 0;
  1187. -webkit-transform: scale(0.4);
  1188. transform: scale(0.4); }
  1189. 100% {
  1190. opacity: 0; } }
  1191. .zoom-out-lg {
  1192. -webkit-animation-name: zoom-out-lg;
  1193. animation-name: zoom-out-lg; }
  1194. .blink-slow {
  1195. -webkit-animation-name: blink-slow;
  1196. animation-name: blink-slow;
  1197. -webkit-animation-duration: 0.3s;
  1198. animation-duration: 0.3s;
  1199. -webkit-animation-iteration-count: infinite;
  1200. animation-iteration-count: infinite;
  1201. -webkit-animation-timing-function: ease-in-out;
  1202. animation-timing-function: ease-in-out;
  1203. -webkit-animation-direction: alternate;
  1204. animation-direction: alternate; }
  1205. @-webkit-keyframes blink-slow {
  1206. 0% {
  1207. opacity: 0.4; }
  1208. 50% {
  1209. opacity: 0.7; }
  1210. 100% {
  1211. opacity: 1; } }
  1212. @keyframes blink-slow {
  1213. 0% {
  1214. opacity: 0.4; }
  1215. 50% {
  1216. opacity: 0.7; }
  1217. 100% {
  1218. opacity: 1; } }
  1219. @-webkit-keyframes overlay-slide-in-top {
  1220. 0% {
  1221. height: 100%; }
  1222. 100% {
  1223. height: 0; } }
  1224. @keyframes overlay-slide-in-top {
  1225. 0% {
  1226. height: 100%; }
  1227. 100% {
  1228. height: 0; } }
  1229. .overlay-slide-in-top {
  1230. -webkit-animation-name: overlay-slide-in-top;
  1231. animation-name: overlay-slide-in-top;
  1232. height: 0;
  1233. top: 0; }
  1234. @-webkit-keyframes overlay-slide-out-top {
  1235. 0% {
  1236. height: 0; }
  1237. 100% {
  1238. height: 100%; } }
  1239. @keyframes overlay-slide-out-top {
  1240. 0% {
  1241. height: 0; }
  1242. 100% {
  1243. height: 100%; } }
  1244. .overlay-slide-out-top {
  1245. -webkit-animation-name: overlay-slide-out-top;
  1246. animation-name: overlay-slide-out-top;
  1247. height: 100%;
  1248. top: 0; }
  1249. @-webkit-keyframes overlay-slide-in-bottom {
  1250. 0% {
  1251. height: 100%; }
  1252. 100% {
  1253. height: 0; } }
  1254. @keyframes overlay-slide-in-bottom {
  1255. 0% {
  1256. height: 100%; }
  1257. 100% {
  1258. height: 0; } }
  1259. .overlay-slide-in-bottom {
  1260. -webkit-animation-name: overlay-slide-in-bottom;
  1261. animation-name: overlay-slide-in-bottom;
  1262. height: 0;
  1263. bottom: 0; }
  1264. @-webkit-keyframes overlay-slide-out-bottom {
  1265. 0% {
  1266. height: 0; }
  1267. 100% {
  1268. height: 100%; } }
  1269. @keyframes overlay-slide-out-bottom {
  1270. 0% {
  1271. height: 0; }
  1272. 100% {
  1273. height: 100%; } }
  1274. .overlay-slide-out-bottom {
  1275. -webkit-animation-name: overlay-slide-out-bottom;
  1276. animation-name: overlay-slide-out-bottom;
  1277. height: 100%;
  1278. bottom: 0; }
  1279. @-webkit-keyframes overlay-slide-in-left {
  1280. 0% {
  1281. width: 100%; }
  1282. 100% {
  1283. width: 0; } }
  1284. @keyframes overlay-slide-in-left {
  1285. 0% {
  1286. width: 100%; }
  1287. 100% {
  1288. width: 0; } }
  1289. .overlay-slide-in-left {
  1290. -webkit-animation-name: overlay-slide-in-left;
  1291. animation-name: overlay-slide-in-left;
  1292. width: 0; }
  1293. @-webkit-keyframes overlay-slide-out-left {
  1294. 0% {
  1295. width: 0; }
  1296. 100% {
  1297. width: 100%; } }
  1298. @keyframes overlay-slide-out-left {
  1299. 0% {
  1300. width: 0; }
  1301. 100% {
  1302. width: 100%; } }
  1303. .overlay-slide-out-left {
  1304. -webkit-animation-name: overlay-slide-out-left;
  1305. animation-name: overlay-slide-out-left;
  1306. width: 100%;
  1307. left: 0; }
  1308. @-webkit-keyframes overlay-slide-in-right {
  1309. 0% {
  1310. width: 100%; }
  1311. 100% {
  1312. width: 0; } }
  1313. @keyframes overlay-slide-in-right {
  1314. 0% {
  1315. width: 100%; }
  1316. 100% {
  1317. width: 0; } }
  1318. .overlay-slide-in-right {
  1319. -webkit-animation-name: overlay-slide-in-right;
  1320. animation-name: overlay-slide-in-right;
  1321. width: 0;
  1322. right: 0; }
  1323. @-webkit-keyframes overlay-slide-out-right {
  1324. 0% {
  1325. width: 0; }
  1326. 100% {
  1327. width: 100%; } }
  1328. @keyframes overlay-slide-out-right {
  1329. 0% {
  1330. width: 0; }
  1331. 100% {
  1332. width: 100%; } }
  1333. .overlay-slide-out-right {
  1334. -webkit-animation-name: overlay-slide-out-right;
  1335. animation-name: overlay-slide-out-right;
  1336. width: 100%;
  1337. right: 0; }