transition.css 44 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964
  1. /*!
  2. * # Semantic UI 2.2.6 - 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. Static Animations
  1600. *******************************/
  1601. /*--------------
  1602. Emphasis
  1603. ---------------*/
  1604. .flash.transition {
  1605. -webkit-animation-duration: 750ms;
  1606. animation-duration: 750ms;
  1607. -webkit-animation-name: flash;
  1608. animation-name: flash;
  1609. }
  1610. .shake.transition {
  1611. -webkit-animation-duration: 750ms;
  1612. animation-duration: 750ms;
  1613. -webkit-animation-name: shake;
  1614. animation-name: shake;
  1615. }
  1616. .bounce.transition {
  1617. -webkit-animation-duration: 750ms;
  1618. animation-duration: 750ms;
  1619. -webkit-animation-name: bounce;
  1620. animation-name: bounce;
  1621. }
  1622. .tada.transition {
  1623. -webkit-animation-duration: 750ms;
  1624. animation-duration: 750ms;
  1625. -webkit-animation-name: tada;
  1626. animation-name: tada;
  1627. }
  1628. .pulse.transition {
  1629. -webkit-animation-duration: 500ms;
  1630. animation-duration: 500ms;
  1631. -webkit-animation-name: pulse;
  1632. animation-name: pulse;
  1633. }
  1634. .jiggle.transition {
  1635. -webkit-animation-duration: 750ms;
  1636. animation-duration: 750ms;
  1637. -webkit-animation-name: jiggle;
  1638. animation-name: jiggle;
  1639. }
  1640. /* Flash */
  1641. @-webkit-keyframes flash {
  1642. 0%,
  1643. 50%,
  1644. 100% {
  1645. opacity: 1;
  1646. }
  1647. 25%,
  1648. 75% {
  1649. opacity: 0;
  1650. }
  1651. }
  1652. @keyframes flash {
  1653. 0%,
  1654. 50%,
  1655. 100% {
  1656. opacity: 1;
  1657. }
  1658. 25%,
  1659. 75% {
  1660. opacity: 0;
  1661. }
  1662. }
  1663. /* Shake */
  1664. @-webkit-keyframes shake {
  1665. 0%,
  1666. 100% {
  1667. -webkit-transform: translateX(0);
  1668. transform: translateX(0);
  1669. }
  1670. 10%,
  1671. 30%,
  1672. 50%,
  1673. 70%,
  1674. 90% {
  1675. -webkit-transform: translateX(-10px);
  1676. transform: translateX(-10px);
  1677. }
  1678. 20%,
  1679. 40%,
  1680. 60%,
  1681. 80% {
  1682. -webkit-transform: translateX(10px);
  1683. transform: translateX(10px);
  1684. }
  1685. }
  1686. @keyframes shake {
  1687. 0%,
  1688. 100% {
  1689. -webkit-transform: translateX(0);
  1690. transform: translateX(0);
  1691. }
  1692. 10%,
  1693. 30%,
  1694. 50%,
  1695. 70%,
  1696. 90% {
  1697. -webkit-transform: translateX(-10px);
  1698. transform: translateX(-10px);
  1699. }
  1700. 20%,
  1701. 40%,
  1702. 60%,
  1703. 80% {
  1704. -webkit-transform: translateX(10px);
  1705. transform: translateX(10px);
  1706. }
  1707. }
  1708. /* Bounce */
  1709. @-webkit-keyframes bounce {
  1710. 0%,
  1711. 20%,
  1712. 50%,
  1713. 80%,
  1714. 100% {
  1715. -webkit-transform: translateY(0);
  1716. transform: translateY(0);
  1717. }
  1718. 40% {
  1719. -webkit-transform: translateY(-30px);
  1720. transform: translateY(-30px);
  1721. }
  1722. 60% {
  1723. -webkit-transform: translateY(-15px);
  1724. transform: translateY(-15px);
  1725. }
  1726. }
  1727. @keyframes bounce {
  1728. 0%,
  1729. 20%,
  1730. 50%,
  1731. 80%,
  1732. 100% {
  1733. -webkit-transform: translateY(0);
  1734. transform: translateY(0);
  1735. }
  1736. 40% {
  1737. -webkit-transform: translateY(-30px);
  1738. transform: translateY(-30px);
  1739. }
  1740. 60% {
  1741. -webkit-transform: translateY(-15px);
  1742. transform: translateY(-15px);
  1743. }
  1744. }
  1745. /* Tada */
  1746. @-webkit-keyframes tada {
  1747. 0% {
  1748. -webkit-transform: scale(1);
  1749. transform: scale(1);
  1750. }
  1751. 10%,
  1752. 20% {
  1753. -webkit-transform: scale(0.9) rotate(-3deg);
  1754. transform: scale(0.9) rotate(-3deg);
  1755. }
  1756. 30%,
  1757. 50%,
  1758. 70%,
  1759. 90% {
  1760. -webkit-transform: scale(1.1) rotate(3deg);
  1761. transform: scale(1.1) rotate(3deg);
  1762. }
  1763. 40%,
  1764. 60%,
  1765. 80% {
  1766. -webkit-transform: scale(1.1) rotate(-3deg);
  1767. transform: scale(1.1) rotate(-3deg);
  1768. }
  1769. 100% {
  1770. -webkit-transform: scale(1) rotate(0);
  1771. transform: scale(1) rotate(0);
  1772. }
  1773. }
  1774. @keyframes tada {
  1775. 0% {
  1776. -webkit-transform: scale(1);
  1777. transform: scale(1);
  1778. }
  1779. 10%,
  1780. 20% {
  1781. -webkit-transform: scale(0.9) rotate(-3deg);
  1782. transform: scale(0.9) rotate(-3deg);
  1783. }
  1784. 30%,
  1785. 50%,
  1786. 70%,
  1787. 90% {
  1788. -webkit-transform: scale(1.1) rotate(3deg);
  1789. transform: scale(1.1) rotate(3deg);
  1790. }
  1791. 40%,
  1792. 60%,
  1793. 80% {
  1794. -webkit-transform: scale(1.1) rotate(-3deg);
  1795. transform: scale(1.1) rotate(-3deg);
  1796. }
  1797. 100% {
  1798. -webkit-transform: scale(1) rotate(0);
  1799. transform: scale(1) rotate(0);
  1800. }
  1801. }
  1802. /* Pulse */
  1803. @-webkit-keyframes pulse {
  1804. 0% {
  1805. -webkit-transform: scale(1);
  1806. transform: scale(1);
  1807. opacity: 1;
  1808. }
  1809. 50% {
  1810. -webkit-transform: scale(0.9);
  1811. transform: scale(0.9);
  1812. opacity: 0.7;
  1813. }
  1814. 100% {
  1815. -webkit-transform: scale(1);
  1816. transform: scale(1);
  1817. opacity: 1;
  1818. }
  1819. }
  1820. @keyframes pulse {
  1821. 0% {
  1822. -webkit-transform: scale(1);
  1823. transform: scale(1);
  1824. opacity: 1;
  1825. }
  1826. 50% {
  1827. -webkit-transform: scale(0.9);
  1828. transform: scale(0.9);
  1829. opacity: 0.7;
  1830. }
  1831. 100% {
  1832. -webkit-transform: scale(1);
  1833. transform: scale(1);
  1834. opacity: 1;
  1835. }
  1836. }
  1837. /* Rubberband */
  1838. @-webkit-keyframes jiggle {
  1839. 0% {
  1840. -webkit-transform: scale3d(1, 1, 1);
  1841. transform: scale3d(1, 1, 1);
  1842. }
  1843. 30% {
  1844. -webkit-transform: scale3d(1.25, 0.75, 1);
  1845. transform: scale3d(1.25, 0.75, 1);
  1846. }
  1847. 40% {
  1848. -webkit-transform: scale3d(0.75, 1.25, 1);
  1849. transform: scale3d(0.75, 1.25, 1);
  1850. }
  1851. 50% {
  1852. -webkit-transform: scale3d(1.15, 0.85, 1);
  1853. transform: scale3d(1.15, 0.85, 1);
  1854. }
  1855. 65% {
  1856. -webkit-transform: scale3d(0.95, 1.05, 1);
  1857. transform: scale3d(0.95, 1.05, 1);
  1858. }
  1859. 75% {
  1860. -webkit-transform: scale3d(1.05, 0.95, 1);
  1861. transform: scale3d(1.05, 0.95, 1);
  1862. }
  1863. 100% {
  1864. -webkit-transform: scale3d(1, 1, 1);
  1865. transform: scale3d(1, 1, 1);
  1866. }
  1867. }
  1868. @keyframes jiggle {
  1869. 0% {
  1870. -webkit-transform: scale3d(1, 1, 1);
  1871. transform: scale3d(1, 1, 1);
  1872. }
  1873. 30% {
  1874. -webkit-transform: scale3d(1.25, 0.75, 1);
  1875. transform: scale3d(1.25, 0.75, 1);
  1876. }
  1877. 40% {
  1878. -webkit-transform: scale3d(0.75, 1.25, 1);
  1879. transform: scale3d(0.75, 1.25, 1);
  1880. }
  1881. 50% {
  1882. -webkit-transform: scale3d(1.15, 0.85, 1);
  1883. transform: scale3d(1.15, 0.85, 1);
  1884. }
  1885. 65% {
  1886. -webkit-transform: scale3d(0.95, 1.05, 1);
  1887. transform: scale3d(0.95, 1.05, 1);
  1888. }
  1889. 75% {
  1890. -webkit-transform: scale3d(1.05, 0.95, 1);
  1891. transform: scale3d(1.05, 0.95, 1);
  1892. }
  1893. 100% {
  1894. -webkit-transform: scale3d(1, 1, 1);
  1895. transform: scale3d(1, 1, 1);
  1896. }
  1897. }
  1898. /*******************************
  1899. Site Overrides
  1900. *******************************/