transition.css 46 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059
  1. /*!
  2. * # Semantic UI 2.4.2 - Transition
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  5. *
  6. * Released under the MIT license
  7. * http://opensource.org/licenses/MIT
  8. *
  9. */
  10. /*******************************
  11. Transitions
  12. *******************************/
  13. .transition {
  14. -webkit-animation-iteration-count: 1;
  15. animation-iteration-count: 1;
  16. -webkit-animation-duration: 300ms;
  17. animation-duration: 300ms;
  18. -webkit-animation-timing-function: ease;
  19. animation-timing-function: ease;
  20. -webkit-animation-fill-mode: both;
  21. animation-fill-mode: both;
  22. }
  23. /*******************************
  24. States
  25. *******************************/
  26. /* Animating */
  27. .animating.transition {
  28. -webkit-backface-visibility: hidden;
  29. backface-visibility: hidden;
  30. visibility: visible !important;
  31. }
  32. /* Loading */
  33. .loading.transition {
  34. position: absolute;
  35. top: -99999px;
  36. left: -99999px;
  37. }
  38. /* Hidden */
  39. .hidden.transition {
  40. display: none;
  41. visibility: hidden;
  42. }
  43. /* Visible */
  44. .visible.transition {
  45. display: block !important;
  46. visibility: visible !important;
  47. /* backface-visibility: @backfaceVisibility;
  48. transform: @use3DAcceleration;*/
  49. }
  50. /* Disabled */
  51. .disabled.transition {
  52. -webkit-animation-play-state: paused;
  53. animation-play-state: paused;
  54. }
  55. /*******************************
  56. Variations
  57. *******************************/
  58. .looping.transition {
  59. -webkit-animation-iteration-count: infinite;
  60. animation-iteration-count: infinite;
  61. }
  62. /*******************************
  63. Transitions
  64. *******************************/
  65. /*
  66. Some transitions adapted from Animate CSS
  67. https://github.com/daneden/animate.css
  68. Additional transitions adapted from Glide
  69. by Nick Pettit - https://github.com/nickpettit/glide
  70. */
  71. /*--------------
  72. Browse
  73. ---------------*/
  74. .transition.browse {
  75. -webkit-animation-duration: 500ms;
  76. animation-duration: 500ms;
  77. }
  78. .transition.browse.in {
  79. -webkit-animation-name: browseIn;
  80. animation-name: browseIn;
  81. }
  82. .transition.browse.out,
  83. .transition.browse.left.out {
  84. -webkit-animation-name: browseOutLeft;
  85. animation-name: browseOutLeft;
  86. }
  87. .transition.browse.right.out {
  88. -webkit-animation-name: browseOutRight;
  89. animation-name: browseOutRight;
  90. }
  91. /* In */
  92. @-webkit-keyframes browseIn {
  93. 0% {
  94. -webkit-transform: scale(0.8) translateZ(0px);
  95. transform: scale(0.8) translateZ(0px);
  96. z-index: -1;
  97. }
  98. 10% {
  99. -webkit-transform: scale(0.8) translateZ(0px);
  100. transform: scale(0.8) translateZ(0px);
  101. z-index: -1;
  102. opacity: 0.7;
  103. }
  104. 80% {
  105. -webkit-transform: scale(1.05) translateZ(0px);
  106. transform: scale(1.05) translateZ(0px);
  107. opacity: 1;
  108. z-index: 999;
  109. }
  110. 100% {
  111. -webkit-transform: scale(1) translateZ(0px);
  112. transform: scale(1) translateZ(0px);
  113. z-index: 999;
  114. }
  115. }
  116. @keyframes browseIn {
  117. 0% {
  118. -webkit-transform: scale(0.8) translateZ(0px);
  119. transform: scale(0.8) translateZ(0px);
  120. z-index: -1;
  121. }
  122. 10% {
  123. -webkit-transform: scale(0.8) translateZ(0px);
  124. transform: scale(0.8) translateZ(0px);
  125. z-index: -1;
  126. opacity: 0.7;
  127. }
  128. 80% {
  129. -webkit-transform: scale(1.05) translateZ(0px);
  130. transform: scale(1.05) translateZ(0px);
  131. opacity: 1;
  132. z-index: 999;
  133. }
  134. 100% {
  135. -webkit-transform: scale(1) translateZ(0px);
  136. transform: scale(1) translateZ(0px);
  137. z-index: 999;
  138. }
  139. }
  140. /* Out */
  141. @-webkit-keyframes browseOutLeft {
  142. 0% {
  143. z-index: 999;
  144. -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg);
  145. transform: translateX(0%) rotateY(0deg) rotateX(0deg);
  146. }
  147. 50% {
  148. z-index: -1;
  149. -webkit-transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
  150. transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
  151. }
  152. 80% {
  153. opacity: 1;
  154. }
  155. 100% {
  156. z-index: -1;
  157. -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
  158. transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
  159. opacity: 0;
  160. }
  161. }
  162. @keyframes browseOutLeft {
  163. 0% {
  164. z-index: 999;
  165. -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg);
  166. transform: translateX(0%) rotateY(0deg) rotateX(0deg);
  167. }
  168. 50% {
  169. z-index: -1;
  170. -webkit-transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
  171. transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
  172. }
  173. 80% {
  174. opacity: 1;
  175. }
  176. 100% {
  177. z-index: -1;
  178. -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
  179. transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
  180. opacity: 0;
  181. }
  182. }
  183. @-webkit-keyframes browseOutRight {
  184. 0% {
  185. z-index: 999;
  186. -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg);
  187. transform: translateX(0%) rotateY(0deg) rotateX(0deg);
  188. }
  189. 50% {
  190. z-index: 1;
  191. -webkit-transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
  192. transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
  193. }
  194. 80% {
  195. opacity: 1;
  196. }
  197. 100% {
  198. z-index: 1;
  199. -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
  200. transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
  201. opacity: 0;
  202. }
  203. }
  204. @keyframes browseOutRight {
  205. 0% {
  206. z-index: 999;
  207. -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg);
  208. transform: translateX(0%) rotateY(0deg) rotateX(0deg);
  209. }
  210. 50% {
  211. z-index: 1;
  212. -webkit-transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
  213. transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
  214. }
  215. 80% {
  216. opacity: 1;
  217. }
  218. 100% {
  219. z-index: 1;
  220. -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
  221. transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
  222. opacity: 0;
  223. }
  224. }
  225. /*--------------
  226. Drop
  227. ---------------*/
  228. .drop.transition {
  229. -webkit-transform-origin: top center;
  230. transform-origin: top center;
  231. -webkit-animation-duration: 400ms;
  232. animation-duration: 400ms;
  233. -webkit-animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
  234. animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
  235. }
  236. .drop.transition.in {
  237. -webkit-animation-name: dropIn;
  238. animation-name: dropIn;
  239. }
  240. .drop.transition.out {
  241. -webkit-animation-name: dropOut;
  242. animation-name: dropOut;
  243. }
  244. /* Drop */
  245. @-webkit-keyframes dropIn {
  246. 0% {
  247. opacity: 0;
  248. -webkit-transform: scale(0);
  249. transform: scale(0);
  250. }
  251. 100% {
  252. opacity: 1;
  253. -webkit-transform: scale(1);
  254. transform: scale(1);
  255. }
  256. }
  257. @keyframes dropIn {
  258. 0% {
  259. opacity: 0;
  260. -webkit-transform: scale(0);
  261. transform: scale(0);
  262. }
  263. 100% {
  264. opacity: 1;
  265. -webkit-transform: scale(1);
  266. transform: scale(1);
  267. }
  268. }
  269. @-webkit-keyframes dropOut {
  270. 0% {
  271. opacity: 1;
  272. -webkit-transform: scale(1);
  273. transform: scale(1);
  274. }
  275. 100% {
  276. opacity: 0;
  277. -webkit-transform: scale(0);
  278. transform: scale(0);
  279. }
  280. }
  281. @keyframes dropOut {
  282. 0% {
  283. opacity: 1;
  284. -webkit-transform: scale(1);
  285. transform: scale(1);
  286. }
  287. 100% {
  288. opacity: 0;
  289. -webkit-transform: scale(0);
  290. transform: scale(0);
  291. }
  292. }
  293. /*--------------
  294. Fade
  295. ---------------*/
  296. .transition.fade.in {
  297. -webkit-animation-name: fadeIn;
  298. animation-name: fadeIn;
  299. }
  300. .transition[class*="fade up"].in {
  301. -webkit-animation-name: fadeInUp;
  302. animation-name: fadeInUp;
  303. }
  304. .transition[class*="fade down"].in {
  305. -webkit-animation-name: fadeInDown;
  306. animation-name: fadeInDown;
  307. }
  308. .transition[class*="fade left"].in {
  309. -webkit-animation-name: fadeInLeft;
  310. animation-name: fadeInLeft;
  311. }
  312. .transition[class*="fade right"].in {
  313. -webkit-animation-name: fadeInRight;
  314. animation-name: fadeInRight;
  315. }
  316. .transition.fade.out {
  317. -webkit-animation-name: fadeOut;
  318. animation-name: fadeOut;
  319. }
  320. .transition[class*="fade up"].out {
  321. -webkit-animation-name: fadeOutUp;
  322. animation-name: fadeOutUp;
  323. }
  324. .transition[class*="fade down"].out {
  325. -webkit-animation-name: fadeOutDown;
  326. animation-name: fadeOutDown;
  327. }
  328. .transition[class*="fade left"].out {
  329. -webkit-animation-name: fadeOutLeft;
  330. animation-name: fadeOutLeft;
  331. }
  332. .transition[class*="fade right"].out {
  333. -webkit-animation-name: fadeOutRight;
  334. animation-name: fadeOutRight;
  335. }
  336. /* In */
  337. @-webkit-keyframes fadeIn {
  338. 0% {
  339. opacity: 0;
  340. }
  341. 100% {
  342. opacity: 1;
  343. }
  344. }
  345. @keyframes fadeIn {
  346. 0% {
  347. opacity: 0;
  348. }
  349. 100% {
  350. opacity: 1;
  351. }
  352. }
  353. @-webkit-keyframes fadeInUp {
  354. 0% {
  355. opacity: 0;
  356. -webkit-transform: translateY(10%);
  357. transform: translateY(10%);
  358. }
  359. 100% {
  360. opacity: 1;
  361. -webkit-transform: translateY(0%);
  362. transform: translateY(0%);
  363. }
  364. }
  365. @keyframes fadeInUp {
  366. 0% {
  367. opacity: 0;
  368. -webkit-transform: translateY(10%);
  369. transform: translateY(10%);
  370. }
  371. 100% {
  372. opacity: 1;
  373. -webkit-transform: translateY(0%);
  374. transform: translateY(0%);
  375. }
  376. }
  377. @-webkit-keyframes fadeInDown {
  378. 0% {
  379. opacity: 0;
  380. -webkit-transform: translateY(-10%);
  381. transform: translateY(-10%);
  382. }
  383. 100% {
  384. opacity: 1;
  385. -webkit-transform: translateY(0%);
  386. transform: translateY(0%);
  387. }
  388. }
  389. @keyframes fadeInDown {
  390. 0% {
  391. opacity: 0;
  392. -webkit-transform: translateY(-10%);
  393. transform: translateY(-10%);
  394. }
  395. 100% {
  396. opacity: 1;
  397. -webkit-transform: translateY(0%);
  398. transform: translateY(0%);
  399. }
  400. }
  401. @-webkit-keyframes fadeInLeft {
  402. 0% {
  403. opacity: 0;
  404. -webkit-transform: translateX(10%);
  405. transform: translateX(10%);
  406. }
  407. 100% {
  408. opacity: 1;
  409. -webkit-transform: translateX(0%);
  410. transform: translateX(0%);
  411. }
  412. }
  413. @keyframes fadeInLeft {
  414. 0% {
  415. opacity: 0;
  416. -webkit-transform: translateX(10%);
  417. transform: translateX(10%);
  418. }
  419. 100% {
  420. opacity: 1;
  421. -webkit-transform: translateX(0%);
  422. transform: translateX(0%);
  423. }
  424. }
  425. @-webkit-keyframes fadeInRight {
  426. 0% {
  427. opacity: 0;
  428. -webkit-transform: translateX(-10%);
  429. transform: translateX(-10%);
  430. }
  431. 100% {
  432. opacity: 1;
  433. -webkit-transform: translateX(0%);
  434. transform: translateX(0%);
  435. }
  436. }
  437. @keyframes fadeInRight {
  438. 0% {
  439. opacity: 0;
  440. -webkit-transform: translateX(-10%);
  441. transform: translateX(-10%);
  442. }
  443. 100% {
  444. opacity: 1;
  445. -webkit-transform: translateX(0%);
  446. transform: translateX(0%);
  447. }
  448. }
  449. /* Out */
  450. @-webkit-keyframes fadeOut {
  451. 0% {
  452. opacity: 1;
  453. }
  454. 100% {
  455. opacity: 0;
  456. }
  457. }
  458. @keyframes fadeOut {
  459. 0% {
  460. opacity: 1;
  461. }
  462. 100% {
  463. opacity: 0;
  464. }
  465. }
  466. @-webkit-keyframes fadeOutUp {
  467. 0% {
  468. opacity: 1;
  469. -webkit-transform: translateY(0%);
  470. transform: translateY(0%);
  471. }
  472. 100% {
  473. opacity: 0;
  474. -webkit-transform: translateY(5%);
  475. transform: translateY(5%);
  476. }
  477. }
  478. @keyframes fadeOutUp {
  479. 0% {
  480. opacity: 1;
  481. -webkit-transform: translateY(0%);
  482. transform: translateY(0%);
  483. }
  484. 100% {
  485. opacity: 0;
  486. -webkit-transform: translateY(5%);
  487. transform: translateY(5%);
  488. }
  489. }
  490. @-webkit-keyframes fadeOutDown {
  491. 0% {
  492. opacity: 1;
  493. -webkit-transform: translateY(0%);
  494. transform: translateY(0%);
  495. }
  496. 100% {
  497. opacity: 0;
  498. -webkit-transform: translateY(-5%);
  499. transform: translateY(-5%);
  500. }
  501. }
  502. @keyframes fadeOutDown {
  503. 0% {
  504. opacity: 1;
  505. -webkit-transform: translateY(0%);
  506. transform: translateY(0%);
  507. }
  508. 100% {
  509. opacity: 0;
  510. -webkit-transform: translateY(-5%);
  511. transform: translateY(-5%);
  512. }
  513. }
  514. @-webkit-keyframes fadeOutLeft {
  515. 0% {
  516. opacity: 1;
  517. -webkit-transform: translateX(0%);
  518. transform: translateX(0%);
  519. }
  520. 100% {
  521. opacity: 0;
  522. -webkit-transform: translateX(5%);
  523. transform: translateX(5%);
  524. }
  525. }
  526. @keyframes fadeOutLeft {
  527. 0% {
  528. opacity: 1;
  529. -webkit-transform: translateX(0%);
  530. transform: translateX(0%);
  531. }
  532. 100% {
  533. opacity: 0;
  534. -webkit-transform: translateX(5%);
  535. transform: translateX(5%);
  536. }
  537. }
  538. @-webkit-keyframes fadeOutRight {
  539. 0% {
  540. opacity: 1;
  541. -webkit-transform: translateX(0%);
  542. transform: translateX(0%);
  543. }
  544. 100% {
  545. opacity: 0;
  546. -webkit-transform: translateX(-5%);
  547. transform: translateX(-5%);
  548. }
  549. }
  550. @keyframes fadeOutRight {
  551. 0% {
  552. opacity: 1;
  553. -webkit-transform: translateX(0%);
  554. transform: translateX(0%);
  555. }
  556. 100% {
  557. opacity: 0;
  558. -webkit-transform: translateX(-5%);
  559. transform: translateX(-5%);
  560. }
  561. }
  562. /*--------------
  563. Flips
  564. ---------------*/
  565. .flip.transition.in,
  566. .flip.transition.out {
  567. -webkit-animation-duration: 600ms;
  568. animation-duration: 600ms;
  569. }
  570. .horizontal.flip.transition.in {
  571. -webkit-animation-name: horizontalFlipIn;
  572. animation-name: horizontalFlipIn;
  573. }
  574. .horizontal.flip.transition.out {
  575. -webkit-animation-name: horizontalFlipOut;
  576. animation-name: horizontalFlipOut;
  577. }
  578. .vertical.flip.transition.in {
  579. -webkit-animation-name: verticalFlipIn;
  580. animation-name: verticalFlipIn;
  581. }
  582. .vertical.flip.transition.out {
  583. -webkit-animation-name: verticalFlipOut;
  584. animation-name: verticalFlipOut;
  585. }
  586. /* In */
  587. @-webkit-keyframes horizontalFlipIn {
  588. 0% {
  589. -webkit-transform: perspective(2000px) rotateY(-90deg);
  590. transform: perspective(2000px) rotateY(-90deg);
  591. opacity: 0;
  592. }
  593. 100% {
  594. -webkit-transform: perspective(2000px) rotateY(0deg);
  595. transform: perspective(2000px) rotateY(0deg);
  596. opacity: 1;
  597. }
  598. }
  599. @keyframes horizontalFlipIn {
  600. 0% {
  601. -webkit-transform: perspective(2000px) rotateY(-90deg);
  602. transform: perspective(2000px) rotateY(-90deg);
  603. opacity: 0;
  604. }
  605. 100% {
  606. -webkit-transform: perspective(2000px) rotateY(0deg);
  607. transform: perspective(2000px) rotateY(0deg);
  608. opacity: 1;
  609. }
  610. }
  611. @-webkit-keyframes verticalFlipIn {
  612. 0% {
  613. -webkit-transform: perspective(2000px) rotateX(-90deg);
  614. transform: perspective(2000px) rotateX(-90deg);
  615. opacity: 0;
  616. }
  617. 100% {
  618. -webkit-transform: perspective(2000px) rotateX(0deg);
  619. transform: perspective(2000px) rotateX(0deg);
  620. opacity: 1;
  621. }
  622. }
  623. @keyframes verticalFlipIn {
  624. 0% {
  625. -webkit-transform: perspective(2000px) rotateX(-90deg);
  626. transform: perspective(2000px) rotateX(-90deg);
  627. opacity: 0;
  628. }
  629. 100% {
  630. -webkit-transform: perspective(2000px) rotateX(0deg);
  631. transform: perspective(2000px) rotateX(0deg);
  632. opacity: 1;
  633. }
  634. }
  635. /* Out */
  636. @-webkit-keyframes horizontalFlipOut {
  637. 0% {
  638. -webkit-transform: perspective(2000px) rotateY(0deg);
  639. transform: perspective(2000px) rotateY(0deg);
  640. opacity: 1;
  641. }
  642. 100% {
  643. -webkit-transform: perspective(2000px) rotateY(90deg);
  644. transform: perspective(2000px) rotateY(90deg);
  645. opacity: 0;
  646. }
  647. }
  648. @keyframes horizontalFlipOut {
  649. 0% {
  650. -webkit-transform: perspective(2000px) rotateY(0deg);
  651. transform: perspective(2000px) rotateY(0deg);
  652. opacity: 1;
  653. }
  654. 100% {
  655. -webkit-transform: perspective(2000px) rotateY(90deg);
  656. transform: perspective(2000px) rotateY(90deg);
  657. opacity: 0;
  658. }
  659. }
  660. @-webkit-keyframes verticalFlipOut {
  661. 0% {
  662. -webkit-transform: perspective(2000px) rotateX(0deg);
  663. transform: perspective(2000px) rotateX(0deg);
  664. opacity: 1;
  665. }
  666. 100% {
  667. -webkit-transform: perspective(2000px) rotateX(-90deg);
  668. transform: perspective(2000px) rotateX(-90deg);
  669. opacity: 0;
  670. }
  671. }
  672. @keyframes verticalFlipOut {
  673. 0% {
  674. -webkit-transform: perspective(2000px) rotateX(0deg);
  675. transform: perspective(2000px) rotateX(0deg);
  676. opacity: 1;
  677. }
  678. 100% {
  679. -webkit-transform: perspective(2000px) rotateX(-90deg);
  680. transform: perspective(2000px) rotateX(-90deg);
  681. opacity: 0;
  682. }
  683. }
  684. /*--------------
  685. Scale
  686. ---------------*/
  687. .scale.transition.in {
  688. -webkit-animation-name: scaleIn;
  689. animation-name: scaleIn;
  690. }
  691. .scale.transition.out {
  692. -webkit-animation-name: scaleOut;
  693. animation-name: scaleOut;
  694. }
  695. @-webkit-keyframes scaleIn {
  696. 0% {
  697. opacity: 0;
  698. -webkit-transform: scale(0.8);
  699. transform: scale(0.8);
  700. }
  701. 100% {
  702. opacity: 1;
  703. -webkit-transform: scale(1);
  704. transform: scale(1);
  705. }
  706. }
  707. @keyframes scaleIn {
  708. 0% {
  709. opacity: 0;
  710. -webkit-transform: scale(0.8);
  711. transform: scale(0.8);
  712. }
  713. 100% {
  714. opacity: 1;
  715. -webkit-transform: scale(1);
  716. transform: scale(1);
  717. }
  718. }
  719. /* Out */
  720. @-webkit-keyframes scaleOut {
  721. 0% {
  722. opacity: 1;
  723. -webkit-transform: scale(1);
  724. transform: scale(1);
  725. }
  726. 100% {
  727. opacity: 0;
  728. -webkit-transform: scale(0.9);
  729. transform: scale(0.9);
  730. }
  731. }
  732. @keyframes scaleOut {
  733. 0% {
  734. opacity: 1;
  735. -webkit-transform: scale(1);
  736. transform: scale(1);
  737. }
  738. 100% {
  739. opacity: 0;
  740. -webkit-transform: scale(0.9);
  741. transform: scale(0.9);
  742. }
  743. }
  744. /*--------------
  745. Fly
  746. ---------------*/
  747. /* Inward */
  748. .transition.fly {
  749. -webkit-animation-duration: 0.6s;
  750. animation-duration: 0.6s;
  751. -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  752. transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  753. }
  754. .transition.fly.in {
  755. -webkit-animation-name: flyIn;
  756. animation-name: flyIn;
  757. }
  758. .transition[class*="fly up"].in {
  759. -webkit-animation-name: flyInUp;
  760. animation-name: flyInUp;
  761. }
  762. .transition[class*="fly down"].in {
  763. -webkit-animation-name: flyInDown;
  764. animation-name: flyInDown;
  765. }
  766. .transition[class*="fly left"].in {
  767. -webkit-animation-name: flyInLeft;
  768. animation-name: flyInLeft;
  769. }
  770. .transition[class*="fly right"].in {
  771. -webkit-animation-name: flyInRight;
  772. animation-name: flyInRight;
  773. }
  774. /* Outward */
  775. .transition.fly.out {
  776. -webkit-animation-name: flyOut;
  777. animation-name: flyOut;
  778. }
  779. .transition[class*="fly up"].out {
  780. -webkit-animation-name: flyOutUp;
  781. animation-name: flyOutUp;
  782. }
  783. .transition[class*="fly down"].out {
  784. -webkit-animation-name: flyOutDown;
  785. animation-name: flyOutDown;
  786. }
  787. .transition[class*="fly left"].out {
  788. -webkit-animation-name: flyOutLeft;
  789. animation-name: flyOutLeft;
  790. }
  791. .transition[class*="fly right"].out {
  792. -webkit-animation-name: flyOutRight;
  793. animation-name: flyOutRight;
  794. }
  795. /* In */
  796. @-webkit-keyframes flyIn {
  797. 0% {
  798. opacity: 0;
  799. -webkit-transform: scale3d(0.3, 0.3, 0.3);
  800. transform: scale3d(0.3, 0.3, 0.3);
  801. }
  802. 20% {
  803. -webkit-transform: scale3d(1.1, 1.1, 1.1);
  804. transform: scale3d(1.1, 1.1, 1.1);
  805. }
  806. 40% {
  807. -webkit-transform: scale3d(0.9, 0.9, 0.9);
  808. transform: scale3d(0.9, 0.9, 0.9);
  809. }
  810. 60% {
  811. opacity: 1;
  812. -webkit-transform: scale3d(1.03, 1.03, 1.03);
  813. transform: scale3d(1.03, 1.03, 1.03);
  814. }
  815. 80% {
  816. -webkit-transform: scale3d(0.97, 0.97, 0.97);
  817. transform: scale3d(0.97, 0.97, 0.97);
  818. }
  819. 100% {
  820. opacity: 1;
  821. -webkit-transform: scale3d(1, 1, 1);
  822. transform: scale3d(1, 1, 1);
  823. }
  824. }
  825. @keyframes flyIn {
  826. 0% {
  827. opacity: 0;
  828. -webkit-transform: scale3d(0.3, 0.3, 0.3);
  829. transform: scale3d(0.3, 0.3, 0.3);
  830. }
  831. 20% {
  832. -webkit-transform: scale3d(1.1, 1.1, 1.1);
  833. transform: scale3d(1.1, 1.1, 1.1);
  834. }
  835. 40% {
  836. -webkit-transform: scale3d(0.9, 0.9, 0.9);
  837. transform: scale3d(0.9, 0.9, 0.9);
  838. }
  839. 60% {
  840. opacity: 1;
  841. -webkit-transform: scale3d(1.03, 1.03, 1.03);
  842. transform: scale3d(1.03, 1.03, 1.03);
  843. }
  844. 80% {
  845. -webkit-transform: scale3d(0.97, 0.97, 0.97);
  846. transform: scale3d(0.97, 0.97, 0.97);
  847. }
  848. 100% {
  849. opacity: 1;
  850. -webkit-transform: scale3d(1, 1, 1);
  851. transform: scale3d(1, 1, 1);
  852. }
  853. }
  854. @-webkit-keyframes flyInUp {
  855. 0% {
  856. opacity: 0;
  857. -webkit-transform: translate3d(0, 1500px, 0);
  858. transform: translate3d(0, 1500px, 0);
  859. }
  860. 60% {
  861. opacity: 1;
  862. -webkit-transform: translate3d(0, -20px, 0);
  863. transform: translate3d(0, -20px, 0);
  864. }
  865. 75% {
  866. -webkit-transform: translate3d(0, 10px, 0);
  867. transform: translate3d(0, 10px, 0);
  868. }
  869. 90% {
  870. -webkit-transform: translate3d(0, -5px, 0);
  871. transform: translate3d(0, -5px, 0);
  872. }
  873. 100% {
  874. -webkit-transform: translate3d(0, 0, 0);
  875. transform: translate3d(0, 0, 0);
  876. }
  877. }
  878. @keyframes flyInUp {
  879. 0% {
  880. opacity: 0;
  881. -webkit-transform: translate3d(0, 1500px, 0);
  882. transform: translate3d(0, 1500px, 0);
  883. }
  884. 60% {
  885. opacity: 1;
  886. -webkit-transform: translate3d(0, -20px, 0);
  887. transform: translate3d(0, -20px, 0);
  888. }
  889. 75% {
  890. -webkit-transform: translate3d(0, 10px, 0);
  891. transform: translate3d(0, 10px, 0);
  892. }
  893. 90% {
  894. -webkit-transform: translate3d(0, -5px, 0);
  895. transform: translate3d(0, -5px, 0);
  896. }
  897. 100% {
  898. -webkit-transform: translate3d(0, 0, 0);
  899. transform: translate3d(0, 0, 0);
  900. }
  901. }
  902. @-webkit-keyframes flyInDown {
  903. 0% {
  904. opacity: 0;
  905. -webkit-transform: translate3d(0, -1500px, 0);
  906. transform: translate3d(0, -1500px, 0);
  907. }
  908. 60% {
  909. opacity: 1;
  910. -webkit-transform: translate3d(0, 25px, 0);
  911. transform: translate3d(0, 25px, 0);
  912. }
  913. 75% {
  914. -webkit-transform: translate3d(0, -10px, 0);
  915. transform: translate3d(0, -10px, 0);
  916. }
  917. 90% {
  918. -webkit-transform: translate3d(0, 5px, 0);
  919. transform: translate3d(0, 5px, 0);
  920. }
  921. 100% {
  922. -webkit-transform: none;
  923. transform: none;
  924. }
  925. }
  926. @keyframes flyInDown {
  927. 0% {
  928. opacity: 0;
  929. -webkit-transform: translate3d(0, -1500px, 0);
  930. transform: translate3d(0, -1500px, 0);
  931. }
  932. 60% {
  933. opacity: 1;
  934. -webkit-transform: translate3d(0, 25px, 0);
  935. transform: translate3d(0, 25px, 0);
  936. }
  937. 75% {
  938. -webkit-transform: translate3d(0, -10px, 0);
  939. transform: translate3d(0, -10px, 0);
  940. }
  941. 90% {
  942. -webkit-transform: translate3d(0, 5px, 0);
  943. transform: translate3d(0, 5px, 0);
  944. }
  945. 100% {
  946. -webkit-transform: none;
  947. transform: none;
  948. }
  949. }
  950. @-webkit-keyframes flyInLeft {
  951. 0% {
  952. opacity: 0;
  953. -webkit-transform: translate3d(1500px, 0, 0);
  954. transform: translate3d(1500px, 0, 0);
  955. }
  956. 60% {
  957. opacity: 1;
  958. -webkit-transform: translate3d(-25px, 0, 0);
  959. transform: translate3d(-25px, 0, 0);
  960. }
  961. 75% {
  962. -webkit-transform: translate3d(10px, 0, 0);
  963. transform: translate3d(10px, 0, 0);
  964. }
  965. 90% {
  966. -webkit-transform: translate3d(-5px, 0, 0);
  967. transform: translate3d(-5px, 0, 0);
  968. }
  969. 100% {
  970. -webkit-transform: none;
  971. transform: none;
  972. }
  973. }
  974. @keyframes flyInLeft {
  975. 0% {
  976. opacity: 0;
  977. -webkit-transform: translate3d(1500px, 0, 0);
  978. transform: translate3d(1500px, 0, 0);
  979. }
  980. 60% {
  981. opacity: 1;
  982. -webkit-transform: translate3d(-25px, 0, 0);
  983. transform: translate3d(-25px, 0, 0);
  984. }
  985. 75% {
  986. -webkit-transform: translate3d(10px, 0, 0);
  987. transform: translate3d(10px, 0, 0);
  988. }
  989. 90% {
  990. -webkit-transform: translate3d(-5px, 0, 0);
  991. transform: translate3d(-5px, 0, 0);
  992. }
  993. 100% {
  994. -webkit-transform: none;
  995. transform: none;
  996. }
  997. }
  998. @-webkit-keyframes flyInRight {
  999. 0% {
  1000. opacity: 0;
  1001. -webkit-transform: translate3d(-1500px, 0, 0);
  1002. transform: translate3d(-1500px, 0, 0);
  1003. }
  1004. 60% {
  1005. opacity: 1;
  1006. -webkit-transform: translate3d(25px, 0, 0);
  1007. transform: translate3d(25px, 0, 0);
  1008. }
  1009. 75% {
  1010. -webkit-transform: translate3d(-10px, 0, 0);
  1011. transform: translate3d(-10px, 0, 0);
  1012. }
  1013. 90% {
  1014. -webkit-transform: translate3d(5px, 0, 0);
  1015. transform: translate3d(5px, 0, 0);
  1016. }
  1017. 100% {
  1018. -webkit-transform: none;
  1019. transform: none;
  1020. }
  1021. }
  1022. @keyframes flyInRight {
  1023. 0% {
  1024. opacity: 0;
  1025. -webkit-transform: translate3d(-1500px, 0, 0);
  1026. transform: translate3d(-1500px, 0, 0);
  1027. }
  1028. 60% {
  1029. opacity: 1;
  1030. -webkit-transform: translate3d(25px, 0, 0);
  1031. transform: translate3d(25px, 0, 0);
  1032. }
  1033. 75% {
  1034. -webkit-transform: translate3d(-10px, 0, 0);
  1035. transform: translate3d(-10px, 0, 0);
  1036. }
  1037. 90% {
  1038. -webkit-transform: translate3d(5px, 0, 0);
  1039. transform: translate3d(5px, 0, 0);
  1040. }
  1041. 100% {
  1042. -webkit-transform: none;
  1043. transform: none;
  1044. }
  1045. }
  1046. /* Out */
  1047. @-webkit-keyframes flyOut {
  1048. 20% {
  1049. -webkit-transform: scale3d(0.9, 0.9, 0.9);
  1050. transform: scale3d(0.9, 0.9, 0.9);
  1051. }
  1052. 50%,
  1053. 55% {
  1054. opacity: 1;
  1055. -webkit-transform: scale3d(1.1, 1.1, 1.1);
  1056. transform: scale3d(1.1, 1.1, 1.1);
  1057. }
  1058. 100% {
  1059. opacity: 0;
  1060. -webkit-transform: scale3d(0.3, 0.3, 0.3);
  1061. transform: scale3d(0.3, 0.3, 0.3);
  1062. }
  1063. }
  1064. @keyframes flyOut {
  1065. 20% {
  1066. -webkit-transform: scale3d(0.9, 0.9, 0.9);
  1067. transform: scale3d(0.9, 0.9, 0.9);
  1068. }
  1069. 50%,
  1070. 55% {
  1071. opacity: 1;
  1072. -webkit-transform: scale3d(1.1, 1.1, 1.1);
  1073. transform: scale3d(1.1, 1.1, 1.1);
  1074. }
  1075. 100% {
  1076. opacity: 0;
  1077. -webkit-transform: scale3d(0.3, 0.3, 0.3);
  1078. transform: scale3d(0.3, 0.3, 0.3);
  1079. }
  1080. }
  1081. @-webkit-keyframes flyOutUp {
  1082. 20% {
  1083. -webkit-transform: translate3d(0, 10px, 0);
  1084. transform: translate3d(0, 10px, 0);
  1085. }
  1086. 40%,
  1087. 45% {
  1088. opacity: 1;
  1089. -webkit-transform: translate3d(0, -20px, 0);
  1090. transform: translate3d(0, -20px, 0);
  1091. }
  1092. 100% {
  1093. opacity: 0;
  1094. -webkit-transform: translate3d(0, 2000px, 0);
  1095. transform: translate3d(0, 2000px, 0);
  1096. }
  1097. }
  1098. @keyframes flyOutUp {
  1099. 20% {
  1100. -webkit-transform: translate3d(0, 10px, 0);
  1101. transform: translate3d(0, 10px, 0);
  1102. }
  1103. 40%,
  1104. 45% {
  1105. opacity: 1;
  1106. -webkit-transform: translate3d(0, -20px, 0);
  1107. transform: translate3d(0, -20px, 0);
  1108. }
  1109. 100% {
  1110. opacity: 0;
  1111. -webkit-transform: translate3d(0, 2000px, 0);
  1112. transform: translate3d(0, 2000px, 0);
  1113. }
  1114. }
  1115. @-webkit-keyframes flyOutDown {
  1116. 20% {
  1117. -webkit-transform: translate3d(0, -10px, 0);
  1118. transform: translate3d(0, -10px, 0);
  1119. }
  1120. 40%,
  1121. 45% {
  1122. opacity: 1;
  1123. -webkit-transform: translate3d(0, 20px, 0);
  1124. transform: translate3d(0, 20px, 0);
  1125. }
  1126. 100% {
  1127. opacity: 0;
  1128. -webkit-transform: translate3d(0, -2000px, 0);
  1129. transform: translate3d(0, -2000px, 0);
  1130. }
  1131. }
  1132. @keyframes flyOutDown {
  1133. 20% {
  1134. -webkit-transform: translate3d(0, -10px, 0);
  1135. transform: translate3d(0, -10px, 0);
  1136. }
  1137. 40%,
  1138. 45% {
  1139. opacity: 1;
  1140. -webkit-transform: translate3d(0, 20px, 0);
  1141. transform: translate3d(0, 20px, 0);
  1142. }
  1143. 100% {
  1144. opacity: 0;
  1145. -webkit-transform: translate3d(0, -2000px, 0);
  1146. transform: translate3d(0, -2000px, 0);
  1147. }
  1148. }
  1149. @-webkit-keyframes flyOutRight {
  1150. 20% {
  1151. opacity: 1;
  1152. -webkit-transform: translate3d(20px, 0, 0);
  1153. transform: translate3d(20px, 0, 0);
  1154. }
  1155. 100% {
  1156. opacity: 0;
  1157. -webkit-transform: translate3d(-2000px, 0, 0);
  1158. transform: translate3d(-2000px, 0, 0);
  1159. }
  1160. }
  1161. @keyframes flyOutRight {
  1162. 20% {
  1163. opacity: 1;
  1164. -webkit-transform: translate3d(20px, 0, 0);
  1165. transform: translate3d(20px, 0, 0);
  1166. }
  1167. 100% {
  1168. opacity: 0;
  1169. -webkit-transform: translate3d(-2000px, 0, 0);
  1170. transform: translate3d(-2000px, 0, 0);
  1171. }
  1172. }
  1173. @-webkit-keyframes flyOutLeft {
  1174. 20% {
  1175. opacity: 1;
  1176. -webkit-transform: translate3d(-20px, 0, 0);
  1177. transform: translate3d(-20px, 0, 0);
  1178. }
  1179. 100% {
  1180. opacity: 0;
  1181. -webkit-transform: translate3d(2000px, 0, 0);
  1182. transform: translate3d(2000px, 0, 0);
  1183. }
  1184. }
  1185. @keyframes flyOutLeft {
  1186. 20% {
  1187. opacity: 1;
  1188. -webkit-transform: translate3d(-20px, 0, 0);
  1189. transform: translate3d(-20px, 0, 0);
  1190. }
  1191. 100% {
  1192. opacity: 0;
  1193. -webkit-transform: translate3d(2000px, 0, 0);
  1194. transform: translate3d(2000px, 0, 0);
  1195. }
  1196. }
  1197. /*--------------
  1198. Slide
  1199. ---------------*/
  1200. .transition.slide.in,
  1201. .transition[class*="slide down"].in {
  1202. -webkit-animation-name: slideInY;
  1203. animation-name: slideInY;
  1204. -webkit-transform-origin: top center;
  1205. transform-origin: top center;
  1206. }
  1207. .transition[class*="slide up"].in {
  1208. -webkit-animation-name: slideInY;
  1209. animation-name: slideInY;
  1210. -webkit-transform-origin: bottom center;
  1211. transform-origin: bottom center;
  1212. }
  1213. .transition[class*="slide left"].in {
  1214. -webkit-animation-name: slideInX;
  1215. animation-name: slideInX;
  1216. -webkit-transform-origin: center right;
  1217. transform-origin: center right;
  1218. }
  1219. .transition[class*="slide right"].in {
  1220. -webkit-animation-name: slideInX;
  1221. animation-name: slideInX;
  1222. -webkit-transform-origin: center left;
  1223. transform-origin: center left;
  1224. }
  1225. .transition.slide.out,
  1226. .transition[class*="slide down"].out {
  1227. -webkit-animation-name: slideOutY;
  1228. animation-name: slideOutY;
  1229. -webkit-transform-origin: top center;
  1230. transform-origin: top center;
  1231. }
  1232. .transition[class*="slide up"].out {
  1233. -webkit-animation-name: slideOutY;
  1234. animation-name: slideOutY;
  1235. -webkit-transform-origin: bottom center;
  1236. transform-origin: bottom center;
  1237. }
  1238. .transition[class*="slide left"].out {
  1239. -webkit-animation-name: slideOutX;
  1240. animation-name: slideOutX;
  1241. -webkit-transform-origin: center right;
  1242. transform-origin: center right;
  1243. }
  1244. .transition[class*="slide right"].out {
  1245. -webkit-animation-name: slideOutX;
  1246. animation-name: slideOutX;
  1247. -webkit-transform-origin: center left;
  1248. transform-origin: center left;
  1249. }
  1250. /* In */
  1251. @-webkit-keyframes slideInY {
  1252. 0% {
  1253. opacity: 0;
  1254. -webkit-transform: scaleY(0);
  1255. transform: scaleY(0);
  1256. }
  1257. 100% {
  1258. opacity: 1;
  1259. -webkit-transform: scaleY(1);
  1260. transform: scaleY(1);
  1261. }
  1262. }
  1263. @keyframes slideInY {
  1264. 0% {
  1265. opacity: 0;
  1266. -webkit-transform: scaleY(0);
  1267. transform: scaleY(0);
  1268. }
  1269. 100% {
  1270. opacity: 1;
  1271. -webkit-transform: scaleY(1);
  1272. transform: scaleY(1);
  1273. }
  1274. }
  1275. @-webkit-keyframes slideInX {
  1276. 0% {
  1277. opacity: 0;
  1278. -webkit-transform: scaleX(0);
  1279. transform: scaleX(0);
  1280. }
  1281. 100% {
  1282. opacity: 1;
  1283. -webkit-transform: scaleX(1);
  1284. transform: scaleX(1);
  1285. }
  1286. }
  1287. @keyframes slideInX {
  1288. 0% {
  1289. opacity: 0;
  1290. -webkit-transform: scaleX(0);
  1291. transform: scaleX(0);
  1292. }
  1293. 100% {
  1294. opacity: 1;
  1295. -webkit-transform: scaleX(1);
  1296. transform: scaleX(1);
  1297. }
  1298. }
  1299. /* Out */
  1300. @-webkit-keyframes slideOutY {
  1301. 0% {
  1302. opacity: 1;
  1303. -webkit-transform: scaleY(1);
  1304. transform: scaleY(1);
  1305. }
  1306. 100% {
  1307. opacity: 0;
  1308. -webkit-transform: scaleY(0);
  1309. transform: scaleY(0);
  1310. }
  1311. }
  1312. @keyframes slideOutY {
  1313. 0% {
  1314. opacity: 1;
  1315. -webkit-transform: scaleY(1);
  1316. transform: scaleY(1);
  1317. }
  1318. 100% {
  1319. opacity: 0;
  1320. -webkit-transform: scaleY(0);
  1321. transform: scaleY(0);
  1322. }
  1323. }
  1324. @-webkit-keyframes slideOutX {
  1325. 0% {
  1326. opacity: 1;
  1327. -webkit-transform: scaleX(1);
  1328. transform: scaleX(1);
  1329. }
  1330. 100% {
  1331. opacity: 0;
  1332. -webkit-transform: scaleX(0);
  1333. transform: scaleX(0);
  1334. }
  1335. }
  1336. @keyframes slideOutX {
  1337. 0% {
  1338. opacity: 1;
  1339. -webkit-transform: scaleX(1);
  1340. transform: scaleX(1);
  1341. }
  1342. 100% {
  1343. opacity: 0;
  1344. -webkit-transform: scaleX(0);
  1345. transform: scaleX(0);
  1346. }
  1347. }
  1348. /*--------------
  1349. Swing
  1350. ---------------*/
  1351. .transition.swing {
  1352. -webkit-animation-duration: 800ms;
  1353. animation-duration: 800ms;
  1354. }
  1355. .transition[class*="swing down"].in {
  1356. -webkit-animation-name: swingInX;
  1357. animation-name: swingInX;
  1358. -webkit-transform-origin: top center;
  1359. transform-origin: top center;
  1360. }
  1361. .transition[class*="swing up"].in {
  1362. -webkit-animation-name: swingInX;
  1363. animation-name: swingInX;
  1364. -webkit-transform-origin: bottom center;
  1365. transform-origin: bottom center;
  1366. }
  1367. .transition[class*="swing left"].in {
  1368. -webkit-animation-name: swingInY;
  1369. animation-name: swingInY;
  1370. -webkit-transform-origin: center right;
  1371. transform-origin: center right;
  1372. }
  1373. .transition[class*="swing right"].in {
  1374. -webkit-animation-name: swingInY;
  1375. animation-name: swingInY;
  1376. -webkit-transform-origin: center left;
  1377. transform-origin: center left;
  1378. }
  1379. .transition.swing.out,
  1380. .transition[class*="swing down"].out {
  1381. -webkit-animation-name: swingOutX;
  1382. animation-name: swingOutX;
  1383. -webkit-transform-origin: top center;
  1384. transform-origin: top center;
  1385. }
  1386. .transition[class*="swing up"].out {
  1387. -webkit-animation-name: swingOutX;
  1388. animation-name: swingOutX;
  1389. -webkit-transform-origin: bottom center;
  1390. transform-origin: bottom center;
  1391. }
  1392. .transition[class*="swing left"].out {
  1393. -webkit-animation-name: swingOutY;
  1394. animation-name: swingOutY;
  1395. -webkit-transform-origin: center right;
  1396. transform-origin: center right;
  1397. }
  1398. .transition[class*="swing right"].out {
  1399. -webkit-animation-name: swingOutY;
  1400. animation-name: swingOutY;
  1401. -webkit-transform-origin: center left;
  1402. transform-origin: center left;
  1403. }
  1404. /* In */
  1405. @-webkit-keyframes swingInX {
  1406. 0% {
  1407. -webkit-transform: perspective(1000px) rotateX(90deg);
  1408. transform: perspective(1000px) rotateX(90deg);
  1409. opacity: 0;
  1410. }
  1411. 40% {
  1412. -webkit-transform: perspective(1000px) rotateX(-30deg);
  1413. transform: perspective(1000px) rotateX(-30deg);
  1414. opacity: 1;
  1415. }
  1416. 60% {
  1417. -webkit-transform: perspective(1000px) rotateX(15deg);
  1418. transform: perspective(1000px) rotateX(15deg);
  1419. }
  1420. 80% {
  1421. -webkit-transform: perspective(1000px) rotateX(-7.5deg);
  1422. transform: perspective(1000px) rotateX(-7.5deg);
  1423. }
  1424. 100% {
  1425. -webkit-transform: perspective(1000px) rotateX(0deg);
  1426. transform: perspective(1000px) rotateX(0deg);
  1427. }
  1428. }
  1429. @keyframes swingInX {
  1430. 0% {
  1431. -webkit-transform: perspective(1000px) rotateX(90deg);
  1432. transform: perspective(1000px) rotateX(90deg);
  1433. opacity: 0;
  1434. }
  1435. 40% {
  1436. -webkit-transform: perspective(1000px) rotateX(-30deg);
  1437. transform: perspective(1000px) rotateX(-30deg);
  1438. opacity: 1;
  1439. }
  1440. 60% {
  1441. -webkit-transform: perspective(1000px) rotateX(15deg);
  1442. transform: perspective(1000px) rotateX(15deg);
  1443. }
  1444. 80% {
  1445. -webkit-transform: perspective(1000px) rotateX(-7.5deg);
  1446. transform: perspective(1000px) rotateX(-7.5deg);
  1447. }
  1448. 100% {
  1449. -webkit-transform: perspective(1000px) rotateX(0deg);
  1450. transform: perspective(1000px) rotateX(0deg);
  1451. }
  1452. }
  1453. @-webkit-keyframes swingInY {
  1454. 0% {
  1455. -webkit-transform: perspective(1000px) rotateY(-90deg);
  1456. transform: perspective(1000px) rotateY(-90deg);
  1457. opacity: 0;
  1458. }
  1459. 40% {
  1460. -webkit-transform: perspective(1000px) rotateY(30deg);
  1461. transform: perspective(1000px) rotateY(30deg);
  1462. opacity: 1;
  1463. }
  1464. 60% {
  1465. -webkit-transform: perspective(1000px) rotateY(-17.5deg);
  1466. transform: perspective(1000px) rotateY(-17.5deg);
  1467. }
  1468. 80% {
  1469. -webkit-transform: perspective(1000px) rotateY(7.5deg);
  1470. transform: perspective(1000px) rotateY(7.5deg);
  1471. }
  1472. 100% {
  1473. -webkit-transform: perspective(1000px) rotateY(0deg);
  1474. transform: perspective(1000px) rotateY(0deg);
  1475. }
  1476. }
  1477. @keyframes swingInY {
  1478. 0% {
  1479. -webkit-transform: perspective(1000px) rotateY(-90deg);
  1480. transform: perspective(1000px) rotateY(-90deg);
  1481. opacity: 0;
  1482. }
  1483. 40% {
  1484. -webkit-transform: perspective(1000px) rotateY(30deg);
  1485. transform: perspective(1000px) rotateY(30deg);
  1486. opacity: 1;
  1487. }
  1488. 60% {
  1489. -webkit-transform: perspective(1000px) rotateY(-17.5deg);
  1490. transform: perspective(1000px) rotateY(-17.5deg);
  1491. }
  1492. 80% {
  1493. -webkit-transform: perspective(1000px) rotateY(7.5deg);
  1494. transform: perspective(1000px) rotateY(7.5deg);
  1495. }
  1496. 100% {
  1497. -webkit-transform: perspective(1000px) rotateY(0deg);
  1498. transform: perspective(1000px) rotateY(0deg);
  1499. }
  1500. }
  1501. /* Out */
  1502. @-webkit-keyframes swingOutX {
  1503. 0% {
  1504. -webkit-transform: perspective(1000px) rotateX(0deg);
  1505. transform: perspective(1000px) rotateX(0deg);
  1506. }
  1507. 40% {
  1508. -webkit-transform: perspective(1000px) rotateX(-7.5deg);
  1509. transform: perspective(1000px) rotateX(-7.5deg);
  1510. }
  1511. 60% {
  1512. -webkit-transform: perspective(1000px) rotateX(17.5deg);
  1513. transform: perspective(1000px) rotateX(17.5deg);
  1514. }
  1515. 80% {
  1516. -webkit-transform: perspective(1000px) rotateX(-30deg);
  1517. transform: perspective(1000px) rotateX(-30deg);
  1518. opacity: 1;
  1519. }
  1520. 100% {
  1521. -webkit-transform: perspective(1000px) rotateX(90deg);
  1522. transform: perspective(1000px) rotateX(90deg);
  1523. opacity: 0;
  1524. }
  1525. }
  1526. @keyframes swingOutX {
  1527. 0% {
  1528. -webkit-transform: perspective(1000px) rotateX(0deg);
  1529. transform: perspective(1000px) rotateX(0deg);
  1530. }
  1531. 40% {
  1532. -webkit-transform: perspective(1000px) rotateX(-7.5deg);
  1533. transform: perspective(1000px) rotateX(-7.5deg);
  1534. }
  1535. 60% {
  1536. -webkit-transform: perspective(1000px) rotateX(17.5deg);
  1537. transform: perspective(1000px) rotateX(17.5deg);
  1538. }
  1539. 80% {
  1540. -webkit-transform: perspective(1000px) rotateX(-30deg);
  1541. transform: perspective(1000px) rotateX(-30deg);
  1542. opacity: 1;
  1543. }
  1544. 100% {
  1545. -webkit-transform: perspective(1000px) rotateX(90deg);
  1546. transform: perspective(1000px) rotateX(90deg);
  1547. opacity: 0;
  1548. }
  1549. }
  1550. @-webkit-keyframes swingOutY {
  1551. 0% {
  1552. -webkit-transform: perspective(1000px) rotateY(0deg);
  1553. transform: perspective(1000px) rotateY(0deg);
  1554. }
  1555. 40% {
  1556. -webkit-transform: perspective(1000px) rotateY(7.5deg);
  1557. transform: perspective(1000px) rotateY(7.5deg);
  1558. }
  1559. 60% {
  1560. -webkit-transform: perspective(1000px) rotateY(-10deg);
  1561. transform: perspective(1000px) rotateY(-10deg);
  1562. }
  1563. 80% {
  1564. -webkit-transform: perspective(1000px) rotateY(30deg);
  1565. transform: perspective(1000px) rotateY(30deg);
  1566. opacity: 1;
  1567. }
  1568. 100% {
  1569. -webkit-transform: perspective(1000px) rotateY(-90deg);
  1570. transform: perspective(1000px) rotateY(-90deg);
  1571. opacity: 0;
  1572. }
  1573. }
  1574. @keyframes swingOutY {
  1575. 0% {
  1576. -webkit-transform: perspective(1000px) rotateY(0deg);
  1577. transform: perspective(1000px) rotateY(0deg);
  1578. }
  1579. 40% {
  1580. -webkit-transform: perspective(1000px) rotateY(7.5deg);
  1581. transform: perspective(1000px) rotateY(7.5deg);
  1582. }
  1583. 60% {
  1584. -webkit-transform: perspective(1000px) rotateY(-10deg);
  1585. transform: perspective(1000px) rotateY(-10deg);
  1586. }
  1587. 80% {
  1588. -webkit-transform: perspective(1000px) rotateY(30deg);
  1589. transform: perspective(1000px) rotateY(30deg);
  1590. opacity: 1;
  1591. }
  1592. 100% {
  1593. -webkit-transform: perspective(1000px) rotateY(-90deg);
  1594. transform: perspective(1000px) rotateY(-90deg);
  1595. opacity: 0;
  1596. }
  1597. }
  1598. /*--------------
  1599. Zoom
  1600. ---------------*/
  1601. .transition.zoom.in {
  1602. -webkit-animation-name: zoomIn;
  1603. animation-name: zoomIn;
  1604. }
  1605. .transition.zoom.out {
  1606. -webkit-animation-name: zoomOut;
  1607. animation-name: zoomOut;
  1608. }
  1609. @-webkit-keyframes zoomIn {
  1610. 0% {
  1611. opacity: 1;
  1612. -webkit-transform: scale(0);
  1613. transform: scale(0);
  1614. }
  1615. 100% {
  1616. opacity: 1;
  1617. -webkit-transform: scale(1);
  1618. transform: scale(1);
  1619. }
  1620. }
  1621. @keyframes zoomIn {
  1622. 0% {
  1623. opacity: 1;
  1624. -webkit-transform: scale(0);
  1625. transform: scale(0);
  1626. }
  1627. 100% {
  1628. opacity: 1;
  1629. -webkit-transform: scale(1);
  1630. transform: scale(1);
  1631. }
  1632. }
  1633. @-webkit-keyframes zoomOut {
  1634. 0% {
  1635. opacity: 1;
  1636. -webkit-transform: scale(1);
  1637. transform: scale(1);
  1638. }
  1639. 100% {
  1640. opacity: 1;
  1641. -webkit-transform: scale(0);
  1642. transform: scale(0);
  1643. }
  1644. }
  1645. @keyframes zoomOut {
  1646. 0% {
  1647. opacity: 1;
  1648. -webkit-transform: scale(1);
  1649. transform: scale(1);
  1650. }
  1651. 100% {
  1652. opacity: 1;
  1653. -webkit-transform: scale(0);
  1654. transform: scale(0);
  1655. }
  1656. }
  1657. /*******************************
  1658. Static Animations
  1659. *******************************/
  1660. /*--------------
  1661. Emphasis
  1662. ---------------*/
  1663. .flash.transition {
  1664. -webkit-animation-duration: 750ms;
  1665. animation-duration: 750ms;
  1666. -webkit-animation-name: flash;
  1667. animation-name: flash;
  1668. }
  1669. .shake.transition {
  1670. -webkit-animation-duration: 750ms;
  1671. animation-duration: 750ms;
  1672. -webkit-animation-name: shake;
  1673. animation-name: shake;
  1674. }
  1675. .bounce.transition {
  1676. -webkit-animation-duration: 750ms;
  1677. animation-duration: 750ms;
  1678. -webkit-animation-name: bounce;
  1679. animation-name: bounce;
  1680. }
  1681. .tada.transition {
  1682. -webkit-animation-duration: 750ms;
  1683. animation-duration: 750ms;
  1684. -webkit-animation-name: tada;
  1685. animation-name: tada;
  1686. }
  1687. .pulse.transition {
  1688. -webkit-animation-duration: 500ms;
  1689. animation-duration: 500ms;
  1690. -webkit-animation-name: pulse;
  1691. animation-name: pulse;
  1692. }
  1693. .jiggle.transition {
  1694. -webkit-animation-duration: 750ms;
  1695. animation-duration: 750ms;
  1696. -webkit-animation-name: jiggle;
  1697. animation-name: jiggle;
  1698. }
  1699. .transition.glow {
  1700. -webkit-animation-duration: 2000ms;
  1701. animation-duration: 2000ms;
  1702. -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  1703. animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  1704. }
  1705. .transition.glow {
  1706. -webkit-animation-name: glow;
  1707. animation-name: glow;
  1708. }
  1709. /* Flash */
  1710. @-webkit-keyframes flash {
  1711. 0%,
  1712. 50%,
  1713. 100% {
  1714. opacity: 1;
  1715. }
  1716. 25%,
  1717. 75% {
  1718. opacity: 0;
  1719. }
  1720. }
  1721. @keyframes flash {
  1722. 0%,
  1723. 50%,
  1724. 100% {
  1725. opacity: 1;
  1726. }
  1727. 25%,
  1728. 75% {
  1729. opacity: 0;
  1730. }
  1731. }
  1732. /* Shake */
  1733. @-webkit-keyframes shake {
  1734. 0%,
  1735. 100% {
  1736. -webkit-transform: translateX(0);
  1737. transform: translateX(0);
  1738. }
  1739. 10%,
  1740. 30%,
  1741. 50%,
  1742. 70%,
  1743. 90% {
  1744. -webkit-transform: translateX(-10px);
  1745. transform: translateX(-10px);
  1746. }
  1747. 20%,
  1748. 40%,
  1749. 60%,
  1750. 80% {
  1751. -webkit-transform: translateX(10px);
  1752. transform: translateX(10px);
  1753. }
  1754. }
  1755. @keyframes shake {
  1756. 0%,
  1757. 100% {
  1758. -webkit-transform: translateX(0);
  1759. transform: translateX(0);
  1760. }
  1761. 10%,
  1762. 30%,
  1763. 50%,
  1764. 70%,
  1765. 90% {
  1766. -webkit-transform: translateX(-10px);
  1767. transform: translateX(-10px);
  1768. }
  1769. 20%,
  1770. 40%,
  1771. 60%,
  1772. 80% {
  1773. -webkit-transform: translateX(10px);
  1774. transform: translateX(10px);
  1775. }
  1776. }
  1777. /* Bounce */
  1778. @-webkit-keyframes bounce {
  1779. 0%,
  1780. 20%,
  1781. 50%,
  1782. 80%,
  1783. 100% {
  1784. -webkit-transform: translateY(0);
  1785. transform: translateY(0);
  1786. }
  1787. 40% {
  1788. -webkit-transform: translateY(-30px);
  1789. transform: translateY(-30px);
  1790. }
  1791. 60% {
  1792. -webkit-transform: translateY(-15px);
  1793. transform: translateY(-15px);
  1794. }
  1795. }
  1796. @keyframes bounce {
  1797. 0%,
  1798. 20%,
  1799. 50%,
  1800. 80%,
  1801. 100% {
  1802. -webkit-transform: translateY(0);
  1803. transform: translateY(0);
  1804. }
  1805. 40% {
  1806. -webkit-transform: translateY(-30px);
  1807. transform: translateY(-30px);
  1808. }
  1809. 60% {
  1810. -webkit-transform: translateY(-15px);
  1811. transform: translateY(-15px);
  1812. }
  1813. }
  1814. /* Tada */
  1815. @-webkit-keyframes tada {
  1816. 0% {
  1817. -webkit-transform: scale(1);
  1818. transform: scale(1);
  1819. }
  1820. 10%,
  1821. 20% {
  1822. -webkit-transform: scale(0.9) rotate(-3deg);
  1823. transform: scale(0.9) rotate(-3deg);
  1824. }
  1825. 30%,
  1826. 50%,
  1827. 70%,
  1828. 90% {
  1829. -webkit-transform: scale(1.1) rotate(3deg);
  1830. transform: scale(1.1) rotate(3deg);
  1831. }
  1832. 40%,
  1833. 60%,
  1834. 80% {
  1835. -webkit-transform: scale(1.1) rotate(-3deg);
  1836. transform: scale(1.1) rotate(-3deg);
  1837. }
  1838. 100% {
  1839. -webkit-transform: scale(1) rotate(0);
  1840. transform: scale(1) rotate(0);
  1841. }
  1842. }
  1843. @keyframes tada {
  1844. 0% {
  1845. -webkit-transform: scale(1);
  1846. transform: scale(1);
  1847. }
  1848. 10%,
  1849. 20% {
  1850. -webkit-transform: scale(0.9) rotate(-3deg);
  1851. transform: scale(0.9) rotate(-3deg);
  1852. }
  1853. 30%,
  1854. 50%,
  1855. 70%,
  1856. 90% {
  1857. -webkit-transform: scale(1.1) rotate(3deg);
  1858. transform: scale(1.1) rotate(3deg);
  1859. }
  1860. 40%,
  1861. 60%,
  1862. 80% {
  1863. -webkit-transform: scale(1.1) rotate(-3deg);
  1864. transform: scale(1.1) rotate(-3deg);
  1865. }
  1866. 100% {
  1867. -webkit-transform: scale(1) rotate(0);
  1868. transform: scale(1) rotate(0);
  1869. }
  1870. }
  1871. /* Pulse */
  1872. @-webkit-keyframes pulse {
  1873. 0% {
  1874. -webkit-transform: scale(1);
  1875. transform: scale(1);
  1876. opacity: 1;
  1877. }
  1878. 50% {
  1879. -webkit-transform: scale(0.9);
  1880. transform: scale(0.9);
  1881. opacity: 0.7;
  1882. }
  1883. 100% {
  1884. -webkit-transform: scale(1);
  1885. transform: scale(1);
  1886. opacity: 1;
  1887. }
  1888. }
  1889. @keyframes pulse {
  1890. 0% {
  1891. -webkit-transform: scale(1);
  1892. transform: scale(1);
  1893. opacity: 1;
  1894. }
  1895. 50% {
  1896. -webkit-transform: scale(0.9);
  1897. transform: scale(0.9);
  1898. opacity: 0.7;
  1899. }
  1900. 100% {
  1901. -webkit-transform: scale(1);
  1902. transform: scale(1);
  1903. opacity: 1;
  1904. }
  1905. }
  1906. /* Jiggle */
  1907. @-webkit-keyframes jiggle {
  1908. 0% {
  1909. -webkit-transform: scale3d(1, 1, 1);
  1910. transform: scale3d(1, 1, 1);
  1911. }
  1912. 30% {
  1913. -webkit-transform: scale3d(1.25, 0.75, 1);
  1914. transform: scale3d(1.25, 0.75, 1);
  1915. }
  1916. 40% {
  1917. -webkit-transform: scale3d(0.75, 1.25, 1);
  1918. transform: scale3d(0.75, 1.25, 1);
  1919. }
  1920. 50% {
  1921. -webkit-transform: scale3d(1.15, 0.85, 1);
  1922. transform: scale3d(1.15, 0.85, 1);
  1923. }
  1924. 65% {
  1925. -webkit-transform: scale3d(0.95, 1.05, 1);
  1926. transform: scale3d(0.95, 1.05, 1);
  1927. }
  1928. 75% {
  1929. -webkit-transform: scale3d(1.05, 0.95, 1);
  1930. transform: scale3d(1.05, 0.95, 1);
  1931. }
  1932. 100% {
  1933. -webkit-transform: scale3d(1, 1, 1);
  1934. transform: scale3d(1, 1, 1);
  1935. }
  1936. }
  1937. @keyframes jiggle {
  1938. 0% {
  1939. -webkit-transform: scale3d(1, 1, 1);
  1940. transform: scale3d(1, 1, 1);
  1941. }
  1942. 30% {
  1943. -webkit-transform: scale3d(1.25, 0.75, 1);
  1944. transform: scale3d(1.25, 0.75, 1);
  1945. }
  1946. 40% {
  1947. -webkit-transform: scale3d(0.75, 1.25, 1);
  1948. transform: scale3d(0.75, 1.25, 1);
  1949. }
  1950. 50% {
  1951. -webkit-transform: scale3d(1.15, 0.85, 1);
  1952. transform: scale3d(1.15, 0.85, 1);
  1953. }
  1954. 65% {
  1955. -webkit-transform: scale3d(0.95, 1.05, 1);
  1956. transform: scale3d(0.95, 1.05, 1);
  1957. }
  1958. 75% {
  1959. -webkit-transform: scale3d(1.05, 0.95, 1);
  1960. transform: scale3d(1.05, 0.95, 1);
  1961. }
  1962. 100% {
  1963. -webkit-transform: scale3d(1, 1, 1);
  1964. transform: scale3d(1, 1, 1);
  1965. }
  1966. }
  1967. /* Glow */
  1968. @-webkit-keyframes glow {
  1969. 0% {
  1970. background-color: #FCFCFD;
  1971. }
  1972. 30% {
  1973. background-color: #FFF6CD;
  1974. }
  1975. 100% {
  1976. background-color: #FCFCFD;
  1977. }
  1978. }
  1979. @keyframes glow {
  1980. 0% {
  1981. background-color: #FCFCFD;
  1982. }
  1983. 30% {
  1984. background-color: #FFF6CD;
  1985. }
  1986. 100% {
  1987. background-color: #FCFCFD;
  1988. }
  1989. }
  1990. /*******************************
  1991. Site Overrides
  1992. *******************************/