animate.css 41 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052
  1. /*
  2. * 整理自 animate.css
  3. * animate.css -http://daneden.me/animate
  4. * Version - 3.7.0
  5. * Licensed under the MIT license - http://opensource.org/licenses/MIT
  6. * Copyright (c) 2018 Daniel Eden
  7. */
  8. .grace-animate{animation:1s linear;}
  9. @keyframes bounce {
  10. from,
  11. 20%,
  12. 53%,
  13. 80%,
  14. to {
  15. animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  16. transform: translate3d(0, 0, 0);
  17. }
  18. 40%,
  19. 43% {
  20. animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  21. transform: translate3d(0, -30px, 0);
  22. }
  23. 70% {
  24. animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  25. transform: translate3d(0, -15px, 0);
  26. }
  27. 90% {
  28. transform: translate3d(0, -4px, 0);
  29. }
  30. }
  31. .bounce {
  32. animation-name: bounce;
  33. transform-origin: center bottom;
  34. }
  35. @keyframes flash {
  36. from,
  37. 50%,
  38. to {
  39. opacity: 1;
  40. }
  41. 25%,
  42. 75% {
  43. opacity: 0;
  44. }
  45. }
  46. .flash {
  47. -webkit-animation-name: flash;
  48. animation-name: flash;
  49. }
  50. @keyframes pulse {
  51. from {
  52. -webkit-transform: scale3d(1, 1, 1);
  53. transform: scale3d(1, 1, 1);
  54. }
  55. 50% {
  56. -webkit-transform: scale3d(1.05, 1.05, 1.05);
  57. transform: scale3d(1.05, 1.05, 1.05);
  58. }
  59. to {
  60. -webkit-transform: scale3d(1, 1, 1);
  61. transform: scale3d(1, 1, 1);
  62. }
  63. }
  64. .pulse {
  65. -webkit-animation-name: pulse;
  66. animation-name: pulse;
  67. }
  68. @keyframes rubberBand {
  69. from {
  70. -webkit-transform: scale3d(1, 1, 1);
  71. transform: scale3d(1, 1, 1);
  72. }
  73. 30% {
  74. -webkit-transform: scale3d(1.25, 0.75, 1);
  75. transform: scale3d(1.25, 0.75, 1);
  76. }
  77. 40% {
  78. -webkit-transform: scale3d(0.75, 1.25, 1);
  79. transform: scale3d(0.75, 1.25, 1);
  80. }
  81. 50% {
  82. -webkit-transform: scale3d(1.15, 0.85, 1);
  83. transform: scale3d(1.15, 0.85, 1);
  84. }
  85. 65% {
  86. -webkit-transform: scale3d(0.95, 1.05, 1);
  87. transform: scale3d(0.95, 1.05, 1);
  88. }
  89. 75% {
  90. -webkit-transform: scale3d(1.05, 0.95, 1);
  91. transform: scale3d(1.05, 0.95, 1);
  92. }
  93. to {
  94. -webkit-transform: scale3d(1, 1, 1);
  95. transform: scale3d(1, 1, 1);
  96. }
  97. }
  98. .rubberBand {
  99. -webkit-animation-name: rubberBand;
  100. animation-name: rubberBand;
  101. }
  102. @keyframes shake {
  103. from,
  104. to {
  105. -webkit-transform: translate3d(0, 0, 0);
  106. transform: translate3d(0, 0, 0);
  107. }
  108. 10%,
  109. 30%,
  110. 50%,
  111. 70%,
  112. 90% {
  113. -webkit-transform: translate3d(-10px, 0, 0);
  114. transform: translate3d(-10px, 0, 0);
  115. }
  116. 20%,
  117. 40%,
  118. 60%,
  119. 80% {
  120. -webkit-transform: translate3d(10px, 0, 0);
  121. transform: translate3d(10px, 0, 0);
  122. }
  123. }
  124. .shake {
  125. -webkit-animation-name: shake;
  126. animation-name: shake;
  127. }
  128. @keyframes headShake {
  129. 0% {
  130. -webkit-transform: translateX(0);
  131. transform: translateX(0);
  132. }
  133. 6.5% {
  134. -webkit-transform: translateX(-6px) rotateY(-9deg);
  135. transform: translateX(-6px) rotateY(-9deg);
  136. }
  137. 18.5% {
  138. -webkit-transform: translateX(5px) rotateY(7deg);
  139. transform: translateX(5px) rotateY(7deg);
  140. }
  141. 31.5% {
  142. -webkit-transform: translateX(-3px) rotateY(-5deg);
  143. transform: translateX(-3px) rotateY(-5deg);
  144. }
  145. 43.5% {
  146. -webkit-transform: translateX(2px) rotateY(3deg);
  147. transform: translateX(2px) rotateY(3deg);
  148. }
  149. 50% {
  150. -webkit-transform: translateX(0);
  151. transform: translateX(0);
  152. }
  153. }
  154. .headShake {
  155. -webkit-animation-timing-function: ease-in-out;
  156. animation-timing-function: ease-in-out;
  157. -webkit-animation-name: headShake;
  158. animation-name: headShake;
  159. }
  160. @keyframes swing {
  161. 20% {
  162. -webkit-transform: rotate3d(0, 0, 1, 15deg);
  163. transform: rotate3d(0, 0, 1, 15deg);
  164. }
  165. 40% {
  166. -webkit-transform: rotate3d(0, 0, 1, -10deg);
  167. transform: rotate3d(0, 0, 1, -10deg);
  168. }
  169. 60% {
  170. -webkit-transform: rotate3d(0, 0, 1, 5deg);
  171. transform: rotate3d(0, 0, 1, 5deg);
  172. }
  173. 80% {
  174. -webkit-transform: rotate3d(0, 0, 1, -5deg);
  175. transform: rotate3d(0, 0, 1, -5deg);
  176. }
  177. to {
  178. -webkit-transform: rotate3d(0, 0, 1, 0deg);
  179. transform: rotate3d(0, 0, 1, 0deg);
  180. }
  181. }
  182. .swing {
  183. -webkit-transform-origin: top center;
  184. transform-origin: top center;
  185. -webkit-animation-name: swing;
  186. animation-name: swing;
  187. }
  188. @keyframes tada {
  189. from {
  190. -webkit-transform: scale3d(1, 1, 1);
  191. transform: scale3d(1, 1, 1);
  192. }
  193. 10%,
  194. 20% {
  195. -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  196. transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  197. }
  198. 30%,
  199. 50%,
  200. 70%,
  201. 90% {
  202. -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  203. transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  204. }
  205. 40%,
  206. 60%,
  207. 80% {
  208. -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  209. transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  210. }
  211. to {
  212. -webkit-transform: scale3d(1, 1, 1);
  213. transform: scale3d(1, 1, 1);
  214. }
  215. }
  216. .tada {
  217. -webkit-animation-name: tada;
  218. animation-name: tada;
  219. }
  220. @-webkit-keyframes wobble {
  221. from {
  222. -webkit-transform: translate3d(0, 0, 0);
  223. transform: translate3d(0, 0, 0);
  224. }
  225. 15% {
  226. -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  227. transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  228. }
  229. 30% {
  230. -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  231. transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  232. }
  233. 45% {
  234. -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  235. transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  236. }
  237. 60% {
  238. -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  239. transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  240. }
  241. 75% {
  242. -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  243. transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  244. }
  245. to {
  246. -webkit-transform: translate3d(0, 0, 0);
  247. transform: translate3d(0, 0, 0);
  248. }
  249. }
  250. @keyframes wobble {
  251. from {
  252. -webkit-transform: translate3d(0, 0, 0);
  253. transform: translate3d(0, 0, 0);
  254. }
  255. 15% {
  256. -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  257. transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  258. }
  259. 30% {
  260. -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  261. transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  262. }
  263. 45% {
  264. -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  265. transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  266. }
  267. 60% {
  268. -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  269. transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  270. }
  271. 75% {
  272. -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  273. transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  274. }
  275. to {
  276. -webkit-transform: translate3d(0, 0, 0);
  277. transform: translate3d(0, 0, 0);
  278. }
  279. }
  280. .wobble {
  281. -webkit-animation-name: wobble;
  282. animation-name: wobble;
  283. }
  284. @keyframes jello {
  285. from,
  286. 11.1%,
  287. to {
  288. -webkit-transform: translate3d(0, 0, 0);
  289. transform: translate3d(0, 0, 0);
  290. }
  291. 22.2% {
  292. -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
  293. transform: skewX(-12.5deg) skewY(-12.5deg);
  294. }
  295. 33.3% {
  296. -webkit-transform: skewX(6.25deg) skewY(6.25deg);
  297. transform: skewX(6.25deg) skewY(6.25deg);
  298. }
  299. 44.4% {
  300. -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
  301. transform: skewX(-3.125deg) skewY(-3.125deg);
  302. }
  303. 55.5% {
  304. -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
  305. transform: skewX(1.5625deg) skewY(1.5625deg);
  306. }
  307. 66.6% {
  308. -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
  309. transform: skewX(-0.78125deg) skewY(-0.78125deg);
  310. }
  311. 77.7% {
  312. -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
  313. transform: skewX(0.390625deg) skewY(0.390625deg);
  314. }
  315. 88.8% {
  316. -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  317. transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  318. }
  319. }
  320. .jello {
  321. -webkit-animation-name: jello;
  322. animation-name: jello;
  323. -webkit-transform-origin: center;
  324. transform-origin: center;
  325. }
  326. @keyframes heartBeat {
  327. 0% {
  328. -webkit-transform: scale(1);
  329. transform: scale(1);
  330. }
  331. 14% {
  332. -webkit-transform: scale(1.3);
  333. transform: scale(1.3);
  334. }
  335. 28% {
  336. -webkit-transform: scale(1);
  337. transform: scale(1);
  338. }
  339. 42% {
  340. -webkit-transform: scale(1.3);
  341. transform: scale(1.3);
  342. }
  343. 70% {
  344. -webkit-transform: scale(1);
  345. transform: scale(1);
  346. }
  347. }
  348. .heartBeat {
  349. -webkit-animation-name: heartBeat;
  350. animation-name: heartBeat;
  351. -webkit-animation-duration: 1.3s;
  352. animation-duration: 1.3s;
  353. -webkit-animation-timing-function: ease-in-out;
  354. animation-timing-function: ease-in-out;
  355. }
  356. @keyframes bounceIn {
  357. from,
  358. 20%,
  359. 40%,
  360. 60%,
  361. 80%,
  362. to {
  363. -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  364. animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  365. }
  366. 0% {
  367. opacity: 0;
  368. -webkit-transform: scale3d(0.3, 0.3, 0.3);
  369. transform: scale3d(0.3, 0.3, 0.3);
  370. }
  371. 20% {
  372. -webkit-transform: scale3d(1.1, 1.1, 1.1);
  373. transform: scale3d(1.1, 1.1, 1.1);
  374. }
  375. 40% {
  376. -webkit-transform: scale3d(0.9, 0.9, 0.9);
  377. transform: scale3d(0.9, 0.9, 0.9);
  378. }
  379. 60% {
  380. opacity: 1;
  381. -webkit-transform: scale3d(1.03, 1.03, 1.03);
  382. transform: scale3d(1.03, 1.03, 1.03);
  383. }
  384. 80% {
  385. -webkit-transform: scale3d(0.97, 0.97, 0.97);
  386. transform: scale3d(0.97, 0.97, 0.97);
  387. }
  388. to {
  389. opacity: 1;
  390. -webkit-transform: scale3d(1, 1, 1);
  391. transform: scale3d(1, 1, 1);
  392. }
  393. }
  394. .bounceIn {
  395. -webkit-animation-duration: 0.75s;
  396. animation-duration: 0.75s;
  397. -webkit-animation-name: bounceIn;
  398. animation-name: bounceIn;
  399. }
  400. @keyframes bounceInDown {
  401. from,
  402. 60%,
  403. 75%,
  404. 90%,
  405. to {
  406. -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  407. animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  408. }
  409. 0% {
  410. opacity: 0;
  411. -webkit-transform: translate3d(0, -3000px, 0);
  412. transform: translate3d(0, -3000px, 0);
  413. }
  414. 60% {
  415. opacity: 1;
  416. -webkit-transform: translate3d(0, 25px, 0);
  417. transform: translate3d(0, 25px, 0);
  418. }
  419. 75% {
  420. -webkit-transform: translate3d(0, -10px, 0);
  421. transform: translate3d(0, -10px, 0);
  422. }
  423. 90% {
  424. -webkit-transform: translate3d(0, 5px, 0);
  425. transform: translate3d(0, 5px, 0);
  426. }
  427. to {
  428. -webkit-transform: translate3d(0, 0, 0);
  429. transform: translate3d(0, 0, 0);
  430. }
  431. }
  432. .bounceInDown {
  433. -webkit-animation-name: bounceInDown;
  434. animation-name: bounceInDown;
  435. }
  436. @keyframes bounceInLeft {
  437. from,
  438. 60%,
  439. 75%,
  440. 90%,
  441. to {
  442. -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  443. animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  444. }
  445. 0% {
  446. opacity: 0;
  447. -webkit-transform: translate3d(-3000px, 0, 0);
  448. transform: translate3d(-3000px, 0, 0);
  449. }
  450. 60% {
  451. opacity: 1;
  452. -webkit-transform: translate3d(25px, 0, 0);
  453. transform: translate3d(25px, 0, 0);
  454. }
  455. 75% {
  456. -webkit-transform: translate3d(-10px, 0, 0);
  457. transform: translate3d(-10px, 0, 0);
  458. }
  459. 90% {
  460. -webkit-transform: translate3d(5px, 0, 0);
  461. transform: translate3d(5px, 0, 0);
  462. }
  463. to {
  464. -webkit-transform: translate3d(0, 0, 0);
  465. transform: translate3d(0, 0, 0);
  466. }
  467. }
  468. .bounceInLeft {
  469. -webkit-animation-name: bounceInLeft;
  470. animation-name: bounceInLeft;
  471. }
  472. @keyframes bounceInRight {
  473. from,
  474. 60%,
  475. 75%,
  476. 90%,
  477. to {
  478. -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  479. animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  480. }
  481. from {
  482. opacity: 0;
  483. -webkit-transform: translate3d(3000px, 0, 0);
  484. transform: translate3d(3000px, 0, 0);
  485. }
  486. 60% {
  487. opacity: 1;
  488. -webkit-transform: translate3d(-25px, 0, 0);
  489. transform: translate3d(-25px, 0, 0);
  490. }
  491. 75% {
  492. -webkit-transform: translate3d(10px, 0, 0);
  493. transform: translate3d(10px, 0, 0);
  494. }
  495. 90% {
  496. -webkit-transform: translate3d(-5px, 0, 0);
  497. transform: translate3d(-5px, 0, 0);
  498. }
  499. to {
  500. -webkit-transform: translate3d(0, 0, 0);
  501. transform: translate3d(0, 0, 0);
  502. }
  503. }
  504. .bounceInRight {
  505. -webkit-animation-name: bounceInRight;
  506. animation-name: bounceInRight;
  507. }
  508. @keyframes bounceInUp {
  509. from,
  510. 60%,
  511. 75%,
  512. 90%,
  513. to {
  514. -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  515. animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  516. }
  517. from {
  518. opacity: 0;
  519. -webkit-transform: translate3d(0, 3000px, 0);
  520. transform: translate3d(0, 3000px, 0);
  521. }
  522. 60% {
  523. opacity: 1;
  524. -webkit-transform: translate3d(0, -20px, 0);
  525. transform: translate3d(0, -20px, 0);
  526. }
  527. 75% {
  528. -webkit-transform: translate3d(0, 10px, 0);
  529. transform: translate3d(0, 10px, 0);
  530. }
  531. 90% {
  532. -webkit-transform: translate3d(0, -5px, 0);
  533. transform: translate3d(0, -5px, 0);
  534. }
  535. to {
  536. -webkit-transform: translate3d(0, 0, 0);
  537. transform: translate3d(0, 0, 0);
  538. }
  539. }
  540. .bounceInUp {
  541. -webkit-animation-name: bounceInUp;
  542. animation-name: bounceInUp;
  543. }
  544. @keyframes bounceOut {
  545. 20% {
  546. -webkit-transform: scale3d(0.9, 0.9, 0.9);
  547. transform: scale3d(0.9, 0.9, 0.9);
  548. }
  549. 50%,
  550. 55% {
  551. opacity: 1;
  552. -webkit-transform: scale3d(1.1, 1.1, 1.1);
  553. transform: scale3d(1.1, 1.1, 1.1);
  554. }
  555. to {
  556. opacity: 0;
  557. -webkit-transform: scale3d(0.3, 0.3, 0.3);
  558. transform: scale3d(0.3, 0.3, 0.3);
  559. }
  560. }
  561. .bounceOut {
  562. -webkit-animation-duration: 0.75s;
  563. animation-duration: 0.75s;
  564. -webkit-animation-name: bounceOut;
  565. animation-name: bounceOut;
  566. }
  567. @keyframes bounceOutDown {
  568. 20% {
  569. -webkit-transform: translate3d(0, 10px, 0);
  570. transform: translate3d(0, 10px, 0);
  571. }
  572. 40%,
  573. 45% {
  574. opacity: 1;
  575. -webkit-transform: translate3d(0, -20px, 0);
  576. transform: translate3d(0, -20px, 0);
  577. }
  578. to {
  579. opacity: 0;
  580. -webkit-transform: translate3d(0, 2000px, 0);
  581. transform: translate3d(0, 2000px, 0);
  582. }
  583. }
  584. .bounceOutDown {
  585. -webkit-animation-name: bounceOutDown;
  586. animation-name: bounceOutDown;
  587. }
  588. @keyframes bounceOutLeft {
  589. 20% {
  590. opacity: 1;
  591. -webkit-transform: translate3d(20px, 0, 0);
  592. transform: translate3d(20px, 0, 0);
  593. }
  594. to {
  595. opacity: 0;
  596. -webkit-transform: translate3d(-2000px, 0, 0);
  597. transform: translate3d(-2000px, 0, 0);
  598. }
  599. }
  600. .bounceOutLeft {
  601. -webkit-animation-name: bounceOutLeft;
  602. animation-name: bounceOutLeft;
  603. }
  604. @keyframes bounceOutRight {
  605. 20% {
  606. opacity: 1;
  607. -webkit-transform: translate3d(-20px, 0, 0);
  608. transform: translate3d(-20px, 0, 0);
  609. }
  610. to {
  611. opacity: 0;
  612. -webkit-transform: translate3d(2000px, 0, 0);
  613. transform: translate3d(2000px, 0, 0);
  614. }
  615. }
  616. .bounceOutRight {
  617. -webkit-animation-name: bounceOutRight;
  618. animation-name: bounceOutRight;
  619. }
  620. @keyframes bounceOutUp {
  621. 20% {
  622. -webkit-transform: translate3d(0, -10px, 0);
  623. transform: translate3d(0, -10px, 0);
  624. }
  625. 40%,
  626. 45% {
  627. opacity: 1;
  628. -webkit-transform: translate3d(0, 20px, 0);
  629. transform: translate3d(0, 20px, 0);
  630. }
  631. to {
  632. opacity: 0;
  633. -webkit-transform: translate3d(0, -2000px, 0);
  634. transform: translate3d(0, -2000px, 0);
  635. }
  636. }
  637. .bounceOutUp {
  638. -webkit-animation-name: bounceOutUp;
  639. animation-name: bounceOutUp;
  640. }
  641. @keyframes fadeIn {
  642. from {
  643. opacity: 0;
  644. }
  645. to {
  646. opacity: 1;
  647. }
  648. }
  649. .fadeIn {
  650. -webkit-animation-name: fadeIn;
  651. animation-name: fadeIn;
  652. }
  653. @keyframes fadeInDown {
  654. from {
  655. opacity: 0;
  656. -webkit-transform: translate3d(0, -100%, 0);
  657. transform: translate3d(0, -100%, 0);
  658. }
  659. to {
  660. opacity: 1;
  661. -webkit-transform: translate3d(0, 0, 0);
  662. transform: translate3d(0, 0, 0);
  663. }
  664. }
  665. .fadeInDown {
  666. -webkit-animation-name: fadeInDown;
  667. animation-name: fadeInDown;
  668. }
  669. @keyframes fadeInDownBig {
  670. from {
  671. opacity: 0;
  672. -webkit-transform: translate3d(0, -2000px, 0);
  673. transform: translate3d(0, -2000px, 0);
  674. }
  675. to {
  676. opacity: 1;
  677. -webkit-transform: translate3d(0, 0, 0);
  678. transform: translate3d(0, 0, 0);
  679. }
  680. }
  681. .fadeInDownBig {
  682. -webkit-animation-name: fadeInDownBig;
  683. animation-name: fadeInDownBig;
  684. }
  685. @keyframes fadeInLeft {
  686. from {
  687. opacity: 0;
  688. -webkit-transform: translate3d(-100%, 0, 0);
  689. transform: translate3d(-100%, 0, 0);
  690. }
  691. to {
  692. opacity: 1;
  693. -webkit-transform: translate3d(0, 0, 0);
  694. transform: translate3d(0, 0, 0);
  695. }
  696. }
  697. .fadeInLeft {
  698. -webkit-animation-name: fadeInLeft;
  699. animation-name: fadeInLeft;
  700. }
  701. @keyframes fadeInLeftBig {
  702. from {
  703. opacity: 0;
  704. -webkit-transform: translate3d(-2000px, 0, 0);
  705. transform: translate3d(-2000px, 0, 0);
  706. }
  707. to {
  708. opacity: 1;
  709. -webkit-transform: translate3d(0, 0, 0);
  710. transform: translate3d(0, 0, 0);
  711. }
  712. }
  713. .fadeInLeftBig {
  714. -webkit-animation-name: fadeInLeftBig;
  715. animation-name: fadeInLeftBig;
  716. }
  717. @keyframes fadeInRight {
  718. from {
  719. opacity: 0;
  720. -webkit-transform: translate3d(100%, 0, 0);
  721. transform: translate3d(100%, 0, 0);
  722. }
  723. to {
  724. opacity: 1;
  725. -webkit-transform: translate3d(0, 0, 0);
  726. transform: translate3d(0, 0, 0);
  727. }
  728. }
  729. .fadeInRight {
  730. -webkit-animation-name: fadeInRight;
  731. animation-name: fadeInRight;
  732. }
  733. @keyframes fadeInRightBig {
  734. from {
  735. opacity: 0;
  736. -webkit-transform: translate3d(2000px, 0, 0);
  737. transform: translate3d(2000px, 0, 0);
  738. }
  739. to {
  740. opacity: 1;
  741. -webkit-transform: translate3d(0, 0, 0);
  742. transform: translate3d(0, 0, 0);
  743. }
  744. }
  745. .fadeInRightBig {
  746. -webkit-animation-name: fadeInRightBig;
  747. animation-name: fadeInRightBig;
  748. }
  749. @keyframes fadeInUp {
  750. from {
  751. opacity: 0;
  752. -webkit-transform: translate3d(0, 100%, 0);
  753. transform: translate3d(0, 100%, 0);
  754. }
  755. to {
  756. opacity: 1;
  757. -webkit-transform: translate3d(0, 0, 0);
  758. transform: translate3d(0, 0, 0);
  759. }
  760. }
  761. .fadeInUp {
  762. -webkit-animation-name: fadeInUp;
  763. animation-name: fadeInUp;
  764. }
  765. @keyframes fadeInUpBig {
  766. from {
  767. opacity: 0;
  768. -webkit-transform: translate3d(0, 2000px, 0);
  769. transform: translate3d(0, 2000px, 0);
  770. }
  771. to {
  772. opacity: 1;
  773. -webkit-transform: translate3d(0, 0, 0);
  774. transform: translate3d(0, 0, 0);
  775. }
  776. }
  777. .fadeInUpBig {
  778. -webkit-animation-name: fadeInUpBig;
  779. animation-name: fadeInUpBig;
  780. }
  781. @keyframes fadeOut {
  782. from {
  783. opacity: 1;
  784. }
  785. to {
  786. opacity: 0;
  787. }
  788. }
  789. .fadeOut {
  790. -webkit-animation-name: fadeOut;
  791. animation-name: fadeOut;
  792. }
  793. @keyframes fadeOutDown {
  794. from {
  795. opacity: 1;
  796. }
  797. to {
  798. opacity: 0;
  799. -webkit-transform: translate3d(0, 100%, 0);
  800. transform: translate3d(0, 100%, 0);
  801. }
  802. }
  803. .fadeOutDown {
  804. -webkit-animation-name: fadeOutDown;
  805. animation-name: fadeOutDown;
  806. }
  807. @keyframes fadeOutDownBig {
  808. from {
  809. opacity: 1;
  810. }
  811. to {
  812. opacity: 0;
  813. -webkit-transform: translate3d(0, 2000px, 0);
  814. transform: translate3d(0, 2000px, 0);
  815. }
  816. }
  817. .fadeOutDownBig {
  818. -webkit-animation-name: fadeOutDownBig;
  819. animation-name: fadeOutDownBig;
  820. }
  821. @keyframes fadeOutLeft {
  822. from {
  823. opacity: 1;
  824. }
  825. to {
  826. opacity: 0;
  827. -webkit-transform: translate3d(-100%, 0, 0);
  828. transform: translate3d(-100%, 0, 0);
  829. }
  830. }
  831. .fadeOutLeft {
  832. -webkit-animation-name: fadeOutLeft;
  833. animation-name: fadeOutLeft;
  834. }
  835. @keyframes fadeOutLeftBig {
  836. from {
  837. opacity: 1;
  838. }
  839. to {
  840. opacity: 0;
  841. -webkit-transform: translate3d(-2000px, 0, 0);
  842. transform: translate3d(-2000px, 0, 0);
  843. }
  844. }
  845. .fadeOutLeftBig {
  846. -webkit-animation-name: fadeOutLeftBig;
  847. animation-name: fadeOutLeftBig;
  848. }
  849. @keyframes fadeOutRight {
  850. from {
  851. opacity: 1;
  852. }
  853. to {
  854. opacity: 0;
  855. -webkit-transform: translate3d(100%, 0, 0);
  856. transform: translate3d(100%, 0, 0);
  857. }
  858. }
  859. .fadeOutRight {
  860. -webkit-animation-name: fadeOutRight;
  861. animation-name: fadeOutRight;
  862. }
  863. @keyframes fadeOutRightBig {
  864. from {
  865. opacity: 1;
  866. }
  867. to {
  868. opacity: 0;
  869. -webkit-transform: translate3d(2000px, 0, 0);
  870. transform: translate3d(2000px, 0, 0);
  871. }
  872. }
  873. .fadeOutRightBig {
  874. -webkit-animation-name: fadeOutRightBig;
  875. animation-name: fadeOutRightBig;
  876. }
  877. @keyframes fadeOutUp {
  878. from {
  879. opacity: 1;
  880. }
  881. to {
  882. opacity: 0;
  883. -webkit-transform: translate3d(0, -100%, 0);
  884. transform: translate3d(0, -100%, 0);
  885. }
  886. }
  887. .fadeOutUp {
  888. -webkit-animation-name: fadeOutUp;
  889. animation-name: fadeOutUp;
  890. }
  891. @keyframes fadeOutUpBig {
  892. from {
  893. opacity: 1;
  894. }
  895. to {
  896. opacity: 0;
  897. -webkit-transform: translate3d(0, -2000px, 0);
  898. transform: translate3d(0, -2000px, 0);
  899. }
  900. }
  901. .fadeOutUpBig {
  902. -webkit-animation-name: fadeOutUpBig;
  903. animation-name: fadeOutUpBig;
  904. }
  905. @keyframes flip {
  906. from {
  907. -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
  908. rotate3d(0, 1, 0, -360deg);
  909. transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
  910. -webkit-animation-timing-function: ease-out;
  911. animation-timing-function: ease-out;
  912. }
  913. 40% {
  914. -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
  915. rotate3d(0, 1, 0, -190deg);
  916. transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
  917. rotate3d(0, 1, 0, -190deg);
  918. -webkit-animation-timing-function: ease-out;
  919. animation-timing-function: ease-out;
  920. }
  921. 50% {
  922. -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
  923. rotate3d(0, 1, 0, -170deg);
  924. transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
  925. rotate3d(0, 1, 0, -170deg);
  926. -webkit-animation-timing-function: ease-in;
  927. animation-timing-function: ease-in;
  928. }
  929. 80% {
  930. -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
  931. rotate3d(0, 1, 0, 0deg);
  932. transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
  933. rotate3d(0, 1, 0, 0deg);
  934. -webkit-animation-timing-function: ease-in;
  935. animation-timing-function: ease-in;
  936. }
  937. to {
  938. -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
  939. rotate3d(0, 1, 0, 0deg);
  940. transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
  941. -webkit-animation-timing-function: ease-in;
  942. animation-timing-function: ease-in;
  943. }
  944. }
  945. .flip {
  946. -webkit-backface-visibility: visible;
  947. backface-visibility: visible;
  948. -webkit-animation-name: flip;
  949. animation-name: flip;
  950. }
  951. @keyframes flipInX {
  952. from {
  953. -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
  954. transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
  955. -webkit-animation-timing-function: ease-in;
  956. animation-timing-function: ease-in;
  957. opacity: 0;
  958. }
  959. 40% {
  960. -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
  961. transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
  962. -webkit-animation-timing-function: ease-in;
  963. animation-timing-function: ease-in;
  964. }
  965. 60% {
  966. -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
  967. transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
  968. opacity: 1;
  969. }
  970. 80% {
  971. -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  972. transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  973. }
  974. to {
  975. -webkit-transform: perspective(400px);
  976. transform: perspective(400px);
  977. }
  978. }
  979. .flipInX {
  980. -webkit-backface-visibility: visible !important;
  981. backface-visibility: visible !important;
  982. -webkit-animation-name: flipInX;
  983. animation-name: flipInX;
  984. }
  985. @keyframes flipInY {
  986. from {
  987. -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
  988. transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
  989. -webkit-animation-timing-function: ease-in;
  990. animation-timing-function: ease-in;
  991. opacity: 0;
  992. }
  993. 40% {
  994. -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
  995. transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
  996. -webkit-animation-timing-function: ease-in;
  997. animation-timing-function: ease-in;
  998. }
  999. 60% {
  1000. -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
  1001. transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
  1002. opacity: 1;
  1003. }
  1004. 80% {
  1005. -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  1006. transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  1007. }
  1008. to {
  1009. -webkit-transform: perspective(400px);
  1010. transform: perspective(400px);
  1011. }
  1012. }
  1013. .flipInY {
  1014. -webkit-backface-visibility: visible !important;
  1015. backface-visibility: visible !important;
  1016. -webkit-animation-name: flipInY;
  1017. animation-name: flipInY;
  1018. }
  1019. @keyframes flipOutX {
  1020. from {
  1021. -webkit-transform: perspective(400px);
  1022. transform: perspective(400px);
  1023. }
  1024. 30% {
  1025. -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
  1026. transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
  1027. opacity: 1;
  1028. }
  1029. to {
  1030. -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
  1031. transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
  1032. opacity: 0;
  1033. }
  1034. }
  1035. .flipOutX {
  1036. -webkit-animation-duration: 0.75s;
  1037. animation-duration: 0.75s;
  1038. -webkit-animation-name: flipOutX;
  1039. animation-name: flipOutX;
  1040. -webkit-backface-visibility: visible !important;
  1041. backface-visibility: visible !important;
  1042. }
  1043. @keyframes flipOutY {
  1044. from {
  1045. -webkit-transform: perspective(400px);
  1046. transform: perspective(400px);
  1047. }
  1048. 30% {
  1049. -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
  1050. transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
  1051. opacity: 1;
  1052. }
  1053. to {
  1054. -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
  1055. transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
  1056. opacity: 0;
  1057. }
  1058. }
  1059. .flipOutY {
  1060. -webkit-animation-duration: 0.75s;
  1061. animation-duration: 0.75s;
  1062. -webkit-backface-visibility: visible !important;
  1063. backface-visibility: visible !important;
  1064. -webkit-animation-name: flipOutY;
  1065. animation-name: flipOutY;
  1066. }
  1067. @keyframes lightSpeedIn {
  1068. from {
  1069. -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
  1070. transform: translate3d(100%, 0, 0) skewX(-30deg);
  1071. opacity: 0;
  1072. }
  1073. 60% {
  1074. -webkit-transform: skewX(20deg);
  1075. transform: skewX(20deg);
  1076. opacity: 1;
  1077. }
  1078. 80% {
  1079. -webkit-transform: skewX(-5deg);
  1080. transform: skewX(-5deg);
  1081. }
  1082. to {
  1083. -webkit-transform: translate3d(0, 0, 0);
  1084. transform: translate3d(0, 0, 0);
  1085. }
  1086. }
  1087. .lightSpeedIn {
  1088. -webkit-animation-name: lightSpeedIn;
  1089. animation-name: lightSpeedIn;
  1090. -webkit-animation-timing-function: ease-out;
  1091. animation-timing-function: ease-out;
  1092. }
  1093. @keyframes lightSpeedOut {
  1094. from {
  1095. opacity: 1;
  1096. }
  1097. to {
  1098. -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
  1099. transform: translate3d(100%, 0, 0) skewX(30deg);
  1100. opacity: 0;
  1101. }
  1102. }
  1103. .lightSpeedOut {
  1104. -webkit-animation-name: lightSpeedOut;
  1105. animation-name: lightSpeedOut;
  1106. -webkit-animation-timing-function: ease-in;
  1107. animation-timing-function: ease-in;
  1108. }
  1109. @keyframes rotateIn {
  1110. from {
  1111. -webkit-transform-origin: center;
  1112. transform-origin: center;
  1113. -webkit-transform: rotate3d(0, 0, 1, -200deg);
  1114. transform: rotate3d(0, 0, 1, -200deg);
  1115. opacity: 0;
  1116. }
  1117. to {
  1118. -webkit-transform-origin: center;
  1119. transform-origin: center;
  1120. -webkit-transform: translate3d(0, 0, 0);
  1121. transform: translate3d(0, 0, 0);
  1122. opacity: 1;
  1123. }
  1124. }
  1125. .rotateIn {
  1126. -webkit-animation-name: rotateIn;
  1127. animation-name: rotateIn;
  1128. }
  1129. @keyframes rotateInDownLeft {
  1130. from {
  1131. -webkit-transform-origin: left bottom;
  1132. transform-origin: left bottom;
  1133. -webkit-transform: rotate3d(0, 0, 1, -45deg);
  1134. transform: rotate3d(0, 0, 1, -45deg);
  1135. opacity: 0;
  1136. }
  1137. to {
  1138. -webkit-transform-origin: left bottom;
  1139. transform-origin: left bottom;
  1140. -webkit-transform: translate3d(0, 0, 0);
  1141. transform: translate3d(0, 0, 0);
  1142. opacity: 1;
  1143. }
  1144. }
  1145. .rotateInDownLeft {
  1146. -webkit-animation-name: rotateInDownLeft;
  1147. animation-name: rotateInDownLeft;
  1148. }
  1149. @keyframes rotateInDownRight {
  1150. from {
  1151. -webkit-transform-origin: right bottom;
  1152. transform-origin: right bottom;
  1153. -webkit-transform: rotate3d(0, 0, 1, 45deg);
  1154. transform: rotate3d(0, 0, 1, 45deg);
  1155. opacity: 0;
  1156. }
  1157. to {
  1158. -webkit-transform-origin: right bottom;
  1159. transform-origin: right bottom;
  1160. -webkit-transform: translate3d(0, 0, 0);
  1161. transform: translate3d(0, 0, 0);
  1162. opacity: 1;
  1163. }
  1164. }
  1165. .rotateInDownRight {
  1166. -webkit-animation-name: rotateInDownRight;
  1167. animation-name: rotateInDownRight;
  1168. }
  1169. @keyframes rotateInUpLeft {
  1170. from {
  1171. -webkit-transform-origin: left bottom;
  1172. transform-origin: left bottom;
  1173. -webkit-transform: rotate3d(0, 0, 1, 45deg);
  1174. transform: rotate3d(0, 0, 1, 45deg);
  1175. opacity: 0;
  1176. }
  1177. to {
  1178. -webkit-transform-origin: left bottom;
  1179. transform-origin: left bottom;
  1180. -webkit-transform: translate3d(0, 0, 0);
  1181. transform: translate3d(0, 0, 0);
  1182. opacity: 1;
  1183. }
  1184. }
  1185. .rotateInUpLeft {
  1186. -webkit-animation-name: rotateInUpLeft;
  1187. animation-name: rotateInUpLeft;
  1188. }
  1189. @keyframes rotateInUpRight {
  1190. from {
  1191. -webkit-transform-origin: right bottom;
  1192. transform-origin: right bottom;
  1193. -webkit-transform: rotate3d(0, 0, 1, -90deg);
  1194. transform: rotate3d(0, 0, 1, -90deg);
  1195. opacity: 0;
  1196. }
  1197. to {
  1198. -webkit-transform-origin: right bottom;
  1199. transform-origin: right bottom;
  1200. -webkit-transform: translate3d(0, 0, 0);
  1201. transform: translate3d(0, 0, 0);
  1202. opacity: 1;
  1203. }
  1204. }
  1205. .rotateInUpRight {
  1206. -webkit-animation-name: rotateInUpRight;
  1207. animation-name: rotateInUpRight;
  1208. }
  1209. @keyframes rotateOut {
  1210. from {
  1211. -webkit-transform-origin: center;
  1212. transform-origin: center;
  1213. opacity: 1;
  1214. }
  1215. to {
  1216. -webkit-transform-origin: center;
  1217. transform-origin: center;
  1218. -webkit-transform: rotate3d(0, 0, 1, 200deg);
  1219. transform: rotate3d(0, 0, 1, 200deg);
  1220. opacity: 0;
  1221. }
  1222. }
  1223. .rotateOut {
  1224. -webkit-animation-name: rotateOut;
  1225. animation-name: rotateOut;
  1226. }
  1227. @keyframes rotateOutDownLeft {
  1228. from {
  1229. -webkit-transform-origin: left bottom;
  1230. transform-origin: left bottom;
  1231. opacity: 1;
  1232. }
  1233. to {
  1234. -webkit-transform-origin: left bottom;
  1235. transform-origin: left bottom;
  1236. -webkit-transform: rotate3d(0, 0, 1, 45deg);
  1237. transform: rotate3d(0, 0, 1, 45deg);
  1238. opacity: 0;
  1239. }
  1240. }
  1241. .rotateOutDownLeft {
  1242. -webkit-animation-name: rotateOutDownLeft;
  1243. animation-name: rotateOutDownLeft;
  1244. }
  1245. @keyframes rotateOutDownRight {
  1246. from {
  1247. -webkit-transform-origin: right bottom;
  1248. transform-origin: right bottom;
  1249. opacity: 1;
  1250. }
  1251. to {
  1252. -webkit-transform-origin: right bottom;
  1253. transform-origin: right bottom;
  1254. -webkit-transform: rotate3d(0, 0, 1, -45deg);
  1255. transform: rotate3d(0, 0, 1, -45deg);
  1256. opacity: 0;
  1257. }
  1258. }
  1259. .rotateOutDownRight {
  1260. -webkit-animation-name: rotateOutDownRight;
  1261. animation-name: rotateOutDownRight;
  1262. }
  1263. @keyframes rotateOutUpLeft {
  1264. from {
  1265. -webkit-transform-origin: left bottom;
  1266. transform-origin: left bottom;
  1267. opacity: 1;
  1268. }
  1269. to {
  1270. -webkit-transform-origin: left bottom;
  1271. transform-origin: left bottom;
  1272. -webkit-transform: rotate3d(0, 0, 1, -45deg);
  1273. transform: rotate3d(0, 0, 1, -45deg);
  1274. opacity: 0;
  1275. }
  1276. }
  1277. .rotateOutUpLeft {
  1278. -webkit-animation-name: rotateOutUpLeft;
  1279. animation-name: rotateOutUpLeft;
  1280. }
  1281. @keyframes rotateOutUpRight {
  1282. from {
  1283. -webkit-transform-origin: right bottom;
  1284. transform-origin: right bottom;
  1285. opacity: 1;
  1286. }
  1287. to {
  1288. -webkit-transform-origin: right bottom;
  1289. transform-origin: right bottom;
  1290. -webkit-transform: rotate3d(0, 0, 1, 90deg);
  1291. transform: rotate3d(0, 0, 1, 90deg);
  1292. opacity: 0;
  1293. }
  1294. }
  1295. .rotateOutUpRight {
  1296. -webkit-animation-name: rotateOutUpRight;
  1297. animation-name: rotateOutUpRight;
  1298. }
  1299. @keyframes hinge {
  1300. 0% {
  1301. -webkit-transform-origin: top left;
  1302. transform-origin: top left;
  1303. -webkit-animation-timing-function: ease-in-out;
  1304. animation-timing-function: ease-in-out;
  1305. }
  1306. 20%,
  1307. 60% {
  1308. -webkit-transform: rotate3d(0, 0, 1, 80deg);
  1309. transform: rotate3d(0, 0, 1, 80deg);
  1310. -webkit-transform-origin: top left;
  1311. transform-origin: top left;
  1312. -webkit-animation-timing-function: ease-in-out;
  1313. animation-timing-function: ease-in-out;
  1314. }
  1315. 40%,
  1316. 80% {
  1317. -webkit-transform: rotate3d(0, 0, 1, 60deg);
  1318. transform: rotate3d(0, 0, 1, 60deg);
  1319. -webkit-transform-origin: top left;
  1320. transform-origin: top left;
  1321. -webkit-animation-timing-function: ease-in-out;
  1322. animation-timing-function: ease-in-out;
  1323. opacity: 1;
  1324. }
  1325. to {
  1326. -webkit-transform: translate3d(0, 700px, 0);
  1327. transform: translate3d(0, 700px, 0);
  1328. opacity: 0;
  1329. }
  1330. }
  1331. .hinge {
  1332. -webkit-animation-duration: 2s;
  1333. animation-duration: 2s;
  1334. -webkit-animation-name: hinge;
  1335. animation-name: hinge;
  1336. }
  1337. @keyframes jackInTheBox {
  1338. from {
  1339. opacity: 0;
  1340. -webkit-transform: scale(0.1) rotate(30deg);
  1341. transform: scale(0.1) rotate(30deg);
  1342. -webkit-transform-origin: center bottom;
  1343. transform-origin: center bottom;
  1344. }
  1345. 50% {
  1346. -webkit-transform: rotate(-10deg);
  1347. transform: rotate(-10deg);
  1348. }
  1349. 70% {
  1350. -webkit-transform: rotate(3deg);
  1351. transform: rotate(3deg);
  1352. }
  1353. to {
  1354. opacity: 1;
  1355. -webkit-transform: scale(1);
  1356. transform: scale(1);
  1357. }
  1358. }
  1359. .jackInTheBox {
  1360. -webkit-animation-name: jackInTheBox;
  1361. animation-name: jackInTheBox;
  1362. }
  1363. @keyframes rollIn {
  1364. from {
  1365. opacity: 0;
  1366. -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  1367. transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  1368. }
  1369. to {
  1370. opacity: 1;
  1371. -webkit-transform: translate3d(0, 0, 0);
  1372. transform: translate3d(0, 0, 0);
  1373. }
  1374. }
  1375. .rollIn {
  1376. -webkit-animation-name: rollIn;
  1377. animation-name: rollIn;
  1378. }
  1379. @keyframes rollOut {
  1380. from {
  1381. opacity: 1;
  1382. }
  1383. to {
  1384. opacity: 0;
  1385. -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  1386. transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  1387. }
  1388. }
  1389. .rollOut {
  1390. -webkit-animation-name: rollOut;
  1391. animation-name: rollOut;
  1392. }
  1393. @keyframes zoomIn {
  1394. from {
  1395. opacity: 0;
  1396. -webkit-transform: scale3d(0.3, 0.3, 0.3);
  1397. transform: scale3d(0.3, 0.3, 0.3);
  1398. }
  1399. 50% {
  1400. opacity: 1;
  1401. }
  1402. }
  1403. .zoomIn {
  1404. -webkit-animation-name: zoomIn;
  1405. animation-name: zoomIn;
  1406. }
  1407. @keyframes zoomInDown {
  1408. from {
  1409. opacity: 0;
  1410. -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
  1411. transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
  1412. -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  1413. animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  1414. }
  1415. 60% {
  1416. opacity: 1;
  1417. -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
  1418. transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
  1419. -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  1420. animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  1421. }
  1422. }
  1423. .zoomInDown {
  1424. -webkit-animation-name: zoomInDown;
  1425. animation-name: zoomInDown;
  1426. }
  1427. @keyframes zoomInLeft {
  1428. from {
  1429. opacity: 0;
  1430. -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
  1431. transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
  1432. -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  1433. animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  1434. }
  1435. 60% {
  1436. opacity: 1;
  1437. -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
  1438. transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
  1439. -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  1440. animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  1441. }
  1442. }
  1443. .zoomInLeft {
  1444. -webkit-animation-name: zoomInLeft;
  1445. animation-name: zoomInLeft;
  1446. }
  1447. @keyframes zoomInRight {
  1448. from {
  1449. opacity: 0;
  1450. -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
  1451. transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
  1452. -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  1453. animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  1454. }
  1455. 60% {
  1456. opacity: 1;
  1457. -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
  1458. transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
  1459. -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  1460. animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  1461. }
  1462. }
  1463. .zoomInRight {
  1464. -webkit-animation-name: zoomInRight;
  1465. animation-name: zoomInRight;
  1466. }
  1467. @keyframes zoomInUp {
  1468. from {
  1469. opacity: 0;
  1470. -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
  1471. transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
  1472. -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  1473. animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  1474. }
  1475. 60% {
  1476. opacity: 1;
  1477. -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
  1478. transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
  1479. -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  1480. animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  1481. }
  1482. }
  1483. .zoomInUp {
  1484. -webkit-animation-name: zoomInUp;
  1485. animation-name: zoomInUp;
  1486. }
  1487. @keyframes zoomOut {
  1488. from {
  1489. opacity: 1;
  1490. }
  1491. 50% {
  1492. opacity: 0;
  1493. -webkit-transform: scale3d(0.3, 0.3, 0.3);
  1494. transform: scale3d(0.3, 0.3, 0.3);
  1495. }
  1496. to {
  1497. opacity: 0;
  1498. }
  1499. }
  1500. .zoomOut {
  1501. -webkit-animation-name: zoomOut;
  1502. animation-name: zoomOut;
  1503. }
  1504. @keyframes zoomOutDown {
  1505. 40% {
  1506. opacity: 1;
  1507. -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
  1508. transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
  1509. -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  1510. animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  1511. }
  1512. to {
  1513. opacity: 0;
  1514. -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
  1515. transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
  1516. -webkit-transform-origin: center bottom;
  1517. transform-origin: center bottom;
  1518. -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  1519. animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  1520. }
  1521. }
  1522. .zoomOutDown {
  1523. -webkit-animation-name: zoomOutDown;
  1524. animation-name: zoomOutDown;
  1525. }
  1526. @keyframes zoomOutLeft {
  1527. 40% {
  1528. opacity: 1;
  1529. -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  1530. transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  1531. }
  1532. to {
  1533. opacity: 0;
  1534. -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
  1535. transform: scale(0.1) translate3d(-2000px, 0, 0);
  1536. -webkit-transform-origin: left center;
  1537. transform-origin: left center;
  1538. }
  1539. }
  1540. .zoomOutLeft {
  1541. -webkit-animation-name: zoomOutLeft;
  1542. animation-name: zoomOutLeft;
  1543. }
  1544. @keyframes zoomOutRight {
  1545. 40% {
  1546. opacity: 1;
  1547. -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  1548. transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  1549. }
  1550. to {
  1551. opacity: 0;
  1552. -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
  1553. transform: scale(0.1) translate3d(2000px, 0, 0);
  1554. -webkit-transform-origin: right center;
  1555. transform-origin: right center;
  1556. }
  1557. }
  1558. .zoomOutRight {
  1559. -webkit-animation-name: zoomOutRight;
  1560. animation-name: zoomOutRight;
  1561. }
  1562. @keyframes zoomOutUp {
  1563. 40% {
  1564. opacity: 1;
  1565. -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
  1566. transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
  1567. -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  1568. animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  1569. }
  1570. to {
  1571. opacity: 0;
  1572. -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
  1573. transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
  1574. -webkit-transform-origin: center bottom;
  1575. transform-origin: center bottom;
  1576. -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  1577. animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  1578. }
  1579. }
  1580. .zoomOutUp {
  1581. -webkit-animation-name: zoomOutUp;
  1582. animation-name: zoomOutUp;
  1583. }
  1584. @keyframes slideInDown {
  1585. from {
  1586. -webkit-transform: translate3d(0, -100%, 0);
  1587. transform: translate3d(0, -100%, 0);
  1588. visibility: visible;
  1589. }
  1590. to {
  1591. -webkit-transform: translate3d(0, 0, 0);
  1592. transform: translate3d(0, 0, 0);
  1593. }
  1594. }
  1595. .slideInDown {
  1596. -webkit-animation-name: slideInDown;
  1597. animation-name: slideInDown;
  1598. }
  1599. @keyframes slideInLeft {
  1600. from {
  1601. -webkit-transform: translate3d(-100%, 0, 0);
  1602. transform: translate3d(-100%, 0, 0);
  1603. visibility: visible;
  1604. }
  1605. to {
  1606. -webkit-transform: translate3d(0, 0, 0);
  1607. transform: translate3d(0, 0, 0);
  1608. }
  1609. }
  1610. .slideInLeft {
  1611. -webkit-animation-name: slideInLeft;
  1612. animation-name: slideInLeft;
  1613. }
  1614. @keyframes slideInRight {
  1615. from {
  1616. -webkit-transform: translate3d(100%, 0, 0);
  1617. transform: translate3d(100%, 0, 0);
  1618. visibility: visible;
  1619. }
  1620. to {
  1621. -webkit-transform: translate3d(0, 0, 0);
  1622. transform: translate3d(0, 0, 0);
  1623. }
  1624. }
  1625. .slideInRight {
  1626. -webkit-animation-name: slideInRight;
  1627. animation-name: slideInRight;
  1628. }
  1629. @keyframes slideInUp {
  1630. from {
  1631. -webkit-transform: translate3d(0, 100%, 0);
  1632. transform: translate3d(0, 100%, 0);
  1633. visibility: visible;
  1634. }
  1635. to {
  1636. -webkit-transform: translate3d(0, 0, 0);
  1637. transform: translate3d(0, 0, 0);
  1638. }
  1639. }
  1640. .slideInUp {
  1641. -webkit-animation-name: slideInUp;
  1642. animation-name: slideInUp;
  1643. }
  1644. @keyframes slideOutDown {
  1645. from {
  1646. -webkit-transform: translate3d(0, 0, 0);
  1647. transform: translate3d(0, 0, 0);
  1648. }
  1649. to {
  1650. visibility: hidden;
  1651. -webkit-transform: translate3d(0, 100%, 0);
  1652. transform: translate3d(0, 100%, 0);
  1653. }
  1654. }
  1655. .slideOutDown {
  1656. -webkit-animation-name: slideOutDown;
  1657. animation-name: slideOutDown;
  1658. }
  1659. @keyframes slideOutLeft {
  1660. from {
  1661. -webkit-transform: translate3d(0, 0, 0);
  1662. transform: translate3d(0, 0, 0);
  1663. }
  1664. to {
  1665. visibility: hidden;
  1666. -webkit-transform: translate3d(-100%, 0, 0);
  1667. transform: translate3d(-100%, 0, 0);
  1668. }
  1669. }
  1670. .slideOutLeft {
  1671. -webkit-animation-name: slideOutLeft;
  1672. animation-name: slideOutLeft;
  1673. }
  1674. @keyframes slideOutRight {
  1675. from {
  1676. -webkit-transform: translate3d(0, 0, 0);
  1677. transform: translate3d(0, 0, 0);
  1678. }
  1679. to {
  1680. visibility: hidden;
  1681. -webkit-transform: translate3d(100%, 0, 0);
  1682. transform: translate3d(100%, 0, 0);
  1683. }
  1684. }
  1685. .slideOutRight {
  1686. -webkit-animation-name: slideOutRight;
  1687. animation-name: slideOutRight;
  1688. }
  1689. @keyframes slideOutUp {
  1690. from {
  1691. -webkit-transform: translate3d(0, 0, 0);
  1692. transform: translate3d(0, 0, 0);
  1693. }
  1694. to {
  1695. visibility: hidden;
  1696. -webkit-transform: translate3d(0, -100%, 0);
  1697. transform: translate3d(0, -100%, 0);
  1698. }
  1699. }
  1700. .slideOutUp {
  1701. -webkit-animation-name: slideOutUp;
  1702. animation-name: slideOutUp;
  1703. }