Laclic
/
ActesCitoyens
Bevaka 4
Stjärnmärk 0
Förgrening 0
Kod Ärenden 0 Pull-förfrågningar 0 Släpp 0 Wiki Aktiviteter
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.
14 Incheckningar
3 Grenar
Träd: 785c411f98
Grenar Taggar
${ item.name }
Skapa branchen ${ searchTerm }
från '785c411f98'
${ noResults }
ActesCitoyens/public/assets/semantic/components/transition.css

2060 lines
46KB
Rå Blame Historik 

  1. /*!

  2.  * # Semantic UI 2.4.0 - 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. 

  12. /*******************************

  13.           Transitions

  14. *******************************/

  15. 

  16. .transition {

  17.   -webkit-animation-iteration-count: 1;

  18.           animation-iteration-count: 1;

  19.   -webkit-animation-duration: 300ms;

  20.           animation-duration: 300ms;

  21.   -webkit-animation-timing-function: ease;

  22.           animation-timing-function: ease;

  23.   -webkit-animation-fill-mode: both;

  24.           animation-fill-mode: both;

  25. }

  26. 

  27. 

  28. /*******************************

  29.             States

  30. *******************************/

  31. 

  32. 

  33. /* Animating */

  34. .animating.transition {

  35.   -webkit-backface-visibility: hidden;

  36.           backface-visibility: hidden;

  37.   visibility: visible !important;

  38. }

  39. 

  40. /* Loading */

  41. .loading.transition {

  42.   position: absolute;

  43.   top: -99999px;

  44.   left: -99999px;

  45. }

  46. 

  47. /* Hidden */

  48. .hidden.transition {

  49.   display: none;

  50.   visibility: hidden;

  51. }

  52. 

  53. /* Visible */

  54. .visible.transition {

  55.   display: block !important;

  56.   visibility: visible !important;

  57.   

  58. /*  backface-visibility: @backfaceVisibility;

  59.   transform: @use3DAcceleration;*/

  60. }

  61. /* Disabled */

  62. .disabled.transition {

  63.   -webkit-animation-play-state: paused;

  64.           animation-play-state: paused;

  65. }

  66. 

  67. 

  68. /*******************************

  69.           Variations

  70. *******************************/

  71. 

  72. .looping.transition {

  73.   -webkit-animation-iteration-count: infinite;

  74.           animation-iteration-count: infinite;

  75. }

  76. 

  77. 

  78. /*******************************

  79.           Transitions

  80. *******************************/

  81. 

  82. /*

  83.   Some transitions adapted from Animate CSS

  84.   https://github.com/daneden/animate.css

  85. 

  86.   Additional transitions adapted from Glide

  87.   by Nick Pettit - https://github.com/nickpettit/glide

  88. */

  89. 

  90. /*--------------

  91.      Browse

  92. ---------------*/

  93. 

  94. .transition.browse {

  95.   -webkit-animation-duration: 500ms;

  96.           animation-duration: 500ms;

  97. }

  98. .transition.browse.in {

  99.   -webkit-animation-name: browseIn;

  100.           animation-name: browseIn;

  101. }

  102. .transition.browse.out,

  103. .transition.browse.left.out {

  104.   -webkit-animation-name: browseOutLeft;

  105.           animation-name: browseOutLeft;

  106. }

  107. .transition.browse.right.out {

  108.   -webkit-animation-name: browseOutRight;

  109.           animation-name: browseOutRight;

  110. }

  111. 

  112. /* In */

  113. @-webkit-keyframes browseIn {

  114.   0% {

  115.     -webkit-transform: scale(0.8) translateZ(0px);

  116.             transform: scale(0.8) translateZ(0px);

  117.     z-index: -1;

  118.   }

  119.   10% {

  120.     -webkit-transform: scale(0.8) translateZ(0px);

  121.             transform: scale(0.8) translateZ(0px);

  122.     z-index: -1;

  123.     opacity: 0.7;

  124.   }

  125.   80% {

  126.     -webkit-transform: scale(1.05) translateZ(0px);

  127.             transform: scale(1.05) translateZ(0px);

  128.     opacity: 1;

  129.     z-index: 999;

  130.   }

  131.   100% {

  132.     -webkit-transform: scale(1) translateZ(0px);

  133.             transform: scale(1) translateZ(0px);

  134.     z-index: 999;

  135.   }

  136. }

  137. @keyframes browseIn {

  138.   0% {

  139.     -webkit-transform: scale(0.8) translateZ(0px);

  140.             transform: scale(0.8) translateZ(0px);

  141.     z-index: -1;

  142.   }

  143.   10% {

  144.     -webkit-transform: scale(0.8) translateZ(0px);

  145.             transform: scale(0.8) translateZ(0px);

  146.     z-index: -1;

  147.     opacity: 0.7;

  148.   }

  149.   80% {

  150.     -webkit-transform: scale(1.05) translateZ(0px);

  151.             transform: scale(1.05) translateZ(0px);

  152.     opacity: 1;

  153.     z-index: 999;

  154.   }

  155.   100% {

  156.     -webkit-transform: scale(1) translateZ(0px);

  157.             transform: scale(1) translateZ(0px);

  158.     z-index: 999;

  159.   }

  160. }

  161. 

  162. /* Out */

  163. @-webkit-keyframes browseOutLeft {

  164.   0% {

  165.     z-index: 999;

  166.     -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg);

  167.             transform: translateX(0%) rotateY(0deg) rotateX(0deg);

  168.   }

  169.   50% {

  170.     z-index: -1;

  171.     -webkit-transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);

  172.             transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);

  173.   }

  174.   80% {

  175.     opacity: 1;

  176.   }

  177.   100% {

  178.     z-index: -1;

  179.     -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);

  180.             transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);

  181.     opacity: 0;

  182.   }

  183. }

  184. @keyframes browseOutLeft {

  185.   0% {

  186.     z-index: 999;

  187.     -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg);

  188.             transform: translateX(0%) rotateY(0deg) rotateX(0deg);

  189.   }

  190.   50% {

  191.     z-index: -1;

  192.     -webkit-transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);

  193.             transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);

  194.   }

  195.   80% {

  196.     opacity: 1;

  197.   }

  198.   100% {

  199.     z-index: -1;

  200.     -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);

  201.             transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);

  202.     opacity: 0;

  203.   }

  204. }

  205. @-webkit-keyframes browseOutRight {

  206.   0% {

  207.     z-index: 999;

  208.     -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg);

  209.             transform: translateX(0%) rotateY(0deg) rotateX(0deg);

  210.   }

  211.   50% {

  212.     z-index: 1;

  213.     -webkit-transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);

  214.             transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);

  215.   }

  216.   80% {

  217.     opacity: 1;

  218.   }

  219.   100% {

  220.     z-index: 1;

  221.     -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);

  222.             transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);

  223.     opacity: 0;

  224.   }

  225. }

  226. @keyframes browseOutRight {

  227.   0% {

  228.     z-index: 999;

  229.     -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg);

  230.             transform: translateX(0%) rotateY(0deg) rotateX(0deg);

  231.   }

  232.   50% {

  233.     z-index: 1;

  234.     -webkit-transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);

  235.             transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);

  236.   }

  237.   80% {

  238.     opacity: 1;

  239.   }

  240.   100% {

  241.     z-index: 1;

  242.     -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);

  243.             transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);

  244.     opacity: 0;

  245.   }

  246. }

  247. 

  248. /*--------------

  249.      Drop

  250. ---------------*/

  251. 

  252. .drop.transition {

  253.   -webkit-transform-origin: top center;

  254.           transform-origin: top center;

  255.   -webkit-animation-duration: 400ms;

  256.           animation-duration: 400ms;

  257.   -webkit-animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);

  258.           animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);

  259. }

  260. .drop.transition.in {

  261.   -webkit-animation-name: dropIn;

  262.           animation-name: dropIn;

  263. }

  264. .drop.transition.out {

  265.   -webkit-animation-name: dropOut;

  266.           animation-name: dropOut;

  267. }

  268. 

  269. /* Drop */

  270. @-webkit-keyframes dropIn {

  271.   0% {

  272.     opacity: 0;

  273.     -webkit-transform: scale(0);

  274.             transform: scale(0);

  275.   }

  276.   100% {

  277.     opacity: 1;

  278.     -webkit-transform: scale(1);

  279.             transform: scale(1);

  280.   }

  281. }

  282. @keyframes dropIn {

  283.   0% {

  284.     opacity: 0;

  285.     -webkit-transform: scale(0);

  286.             transform: scale(0);

  287.   }

  288.   100% {

  289.     opacity: 1;

  290.     -webkit-transform: scale(1);

  291.             transform: scale(1);

  292.   }

  293. }

  294. @-webkit-keyframes dropOut {

  295.   0% {

  296.     opacity: 1;

  297.     -webkit-transform: scale(1);

  298.             transform: scale(1);

  299.   }

  300.   100% {

  301.     opacity: 0;

  302.     -webkit-transform: scale(0);

  303.             transform: scale(0);

  304.   }

  305. }

  306. @keyframes dropOut {

  307.   0% {

  308.     opacity: 1;

  309.     -webkit-transform: scale(1);

  310.             transform: scale(1);

  311.   }

  312.   100% {

  313.     opacity: 0;

  314.     -webkit-transform: scale(0);

  315.             transform: scale(0);

  316.   }

  317. }

  318. 

  319. /*--------------

  320.       Fade

  321. ---------------*/

  322. 

  323. .transition.fade.in {

  324.   -webkit-animation-name: fadeIn;

  325.           animation-name: fadeIn;

  326. }

  327. .transition[class*="fade up"].in {

  328.   -webkit-animation-name: fadeInUp;

  329.           animation-name: fadeInUp;

  330. }

  331. .transition[class*="fade down"].in {

  332.   -webkit-animation-name: fadeInDown;

  333.           animation-name: fadeInDown;

  334. }

  335. .transition[class*="fade left"].in {

  336.   -webkit-animation-name: fadeInLeft;

  337.           animation-name: fadeInLeft;

  338. }

  339. .transition[class*="fade right"].in {

  340.   -webkit-animation-name: fadeInRight;

  341.           animation-name: fadeInRight;

  342. }

  343. .transition.fade.out {

  344.   -webkit-animation-name: fadeOut;

  345.           animation-name: fadeOut;

  346. }

  347. .transition[class*="fade up"].out {

  348.   -webkit-animation-name: fadeOutUp;

  349.           animation-name: fadeOutUp;

  350. }

  351. .transition[class*="fade down"].out {

  352.   -webkit-animation-name: fadeOutDown;

  353.           animation-name: fadeOutDown;

  354. }

  355. .transition[class*="fade left"].out {

  356.   -webkit-animation-name: fadeOutLeft;

  357.           animation-name: fadeOutLeft;

  358. }

  359. .transition[class*="fade right"].out {

  360.   -webkit-animation-name: fadeOutRight;

  361.           animation-name: fadeOutRight;

  362. }

  363. 

  364. /* In */

  365. @-webkit-keyframes fadeIn {

  366.   0% {

  367.     opacity: 0;

  368.   }

  369.   100% {

  370.     opacity: 1;

  371.   }

  372. }

  373. @keyframes fadeIn {

  374.   0% {

  375.     opacity: 0;

  376.   }

  377.   100% {

  378.     opacity: 1;

  379.   }

  380. }

  381. @-webkit-keyframes fadeInUp {

  382.   0% {

  383.     opacity: 0;

  384.     -webkit-transform: translateY(10%);

  385.             transform: translateY(10%);

  386.   }

  387.   100% {

  388.     opacity: 1;

  389.     -webkit-transform: translateY(0%);

  390.             transform: translateY(0%);

  391.   }

  392. }

  393. @keyframes fadeInUp {

  394.   0% {

  395.     opacity: 0;

  396.     -webkit-transform: translateY(10%);

  397.             transform: translateY(10%);

  398.   }

  399.   100% {

  400.     opacity: 1;

  401.     -webkit-transform: translateY(0%);

  402.             transform: translateY(0%);

  403.   }

  404. }

  405. @-webkit-keyframes fadeInDown {

  406.   0% {

  407.     opacity: 0;

  408.     -webkit-transform: translateY(-10%);

  409.             transform: translateY(-10%);

  410.   }

  411.   100% {

  412.     opacity: 1;

  413.     -webkit-transform: translateY(0%);

  414.             transform: translateY(0%);

  415.   }

  416. }

  417. @keyframes fadeInDown {

  418.   0% {

  419.     opacity: 0;

  420.     -webkit-transform: translateY(-10%);

  421.             transform: translateY(-10%);

  422.   }

  423.   100% {

  424.     opacity: 1;

  425.     -webkit-transform: translateY(0%);

  426.             transform: translateY(0%);

  427.   }

  428. }

  429. @-webkit-keyframes fadeInLeft {

  430.   0% {

  431.     opacity: 0;

  432.     -webkit-transform: translateX(10%);

  433.             transform: translateX(10%);

  434.   }

  435.   100% {

  436.     opacity: 1;

  437.     -webkit-transform: translateX(0%);

  438.             transform: translateX(0%);

  439.   }

  440. }

  441. @keyframes fadeInLeft {

  442.   0% {

  443.     opacity: 0;

  444.     -webkit-transform: translateX(10%);

  445.             transform: translateX(10%);

  446.   }

  447.   100% {

  448.     opacity: 1;

  449.     -webkit-transform: translateX(0%);

  450.             transform: translateX(0%);

  451.   }

  452. }

  453. @-webkit-keyframes fadeInRight {

  454.   0% {

  455.     opacity: 0;

  456.     -webkit-transform: translateX(-10%);

  457.             transform: translateX(-10%);

  458.   }

  459.   100% {

  460.     opacity: 1;

  461.     -webkit-transform: translateX(0%);

  462.             transform: translateX(0%);

  463.   }

  464. }

  465. @keyframes fadeInRight {

  466.   0% {

  467.     opacity: 0;

  468.     -webkit-transform: translateX(-10%);

  469.             transform: translateX(-10%);

  470.   }

  471.   100% {

  472.     opacity: 1;

  473.     -webkit-transform: translateX(0%);

  474.             transform: translateX(0%);

  475.   }

  476. }

  477. 

  478. /* Out */

  479. @-webkit-keyframes fadeOut {

  480.   0% {

  481.     opacity: 1;

  482.   }

  483.   100% {

  484.     opacity: 0;

  485.   }

  486. }

  487. @keyframes fadeOut {

  488.   0% {

  489.     opacity: 1;

  490.   }

  491.   100% {

  492.     opacity: 0;

  493.   }

  494. }

  495. @-webkit-keyframes fadeOutUp {

  496.   0% {

  497.     opacity: 1;

  498.     -webkit-transform: translateY(0%);

  499.             transform: translateY(0%);

  500.   }

  501.   100% {

  502.     opacity: 0;

  503.     -webkit-transform: translateY(5%);

  504.             transform: translateY(5%);

  505.   }

  506. }

  507. @keyframes fadeOutUp {

  508.   0% {

  509.     opacity: 1;

  510.     -webkit-transform: translateY(0%);

  511.             transform: translateY(0%);

  512.   }

  513.   100% {

  514.     opacity: 0;

  515.     -webkit-transform: translateY(5%);

  516.             transform: translateY(5%);

  517.   }

  518. }

  519. @-webkit-keyframes fadeOutDown {

  520.   0% {

  521.     opacity: 1;

  522.     -webkit-transform: translateY(0%);

  523.             transform: translateY(0%);

  524.   }

  525.   100% {

  526.     opacity: 0;

  527.     -webkit-transform: translateY(-5%);

  528.             transform: translateY(-5%);

  529.   }

  530. }

  531. @keyframes fadeOutDown {

  532.   0% {

  533.     opacity: 1;

  534.     -webkit-transform: translateY(0%);

  535.             transform: translateY(0%);

  536.   }

  537.   100% {

  538.     opacity: 0;

  539.     -webkit-transform: translateY(-5%);

  540.             transform: translateY(-5%);

  541.   }

  542. }

  543. @-webkit-keyframes fadeOutLeft {

  544.   0% {

  545.     opacity: 1;

  546.     -webkit-transform: translateX(0%);

  547.             transform: translateX(0%);

  548.   }

  549.   100% {

  550.     opacity: 0;

  551.     -webkit-transform: translateX(5%);

  552.             transform: translateX(5%);

  553.   }

  554. }

  555. @keyframes fadeOutLeft {

  556.   0% {

  557.     opacity: 1;

  558.     -webkit-transform: translateX(0%);

  559.             transform: translateX(0%);

  560.   }

  561.   100% {

  562.     opacity: 0;

  563.     -webkit-transform: translateX(5%);

  564.             transform: translateX(5%);

  565.   }

  566. }

  567. @-webkit-keyframes fadeOutRight {

  568.   0% {

  569.     opacity: 1;

  570.     -webkit-transform: translateX(0%);

  571.             transform: translateX(0%);

  572.   }

  573.   100% {

  574.     opacity: 0;

  575.     -webkit-transform: translateX(-5%);

  576.             transform: translateX(-5%);

  577.   }

  578. }

  579. @keyframes fadeOutRight {

  580.   0% {

  581.     opacity: 1;

  582.     -webkit-transform: translateX(0%);

  583.             transform: translateX(0%);

  584.   }

  585.   100% {

  586.     opacity: 0;

  587.     -webkit-transform: translateX(-5%);

  588.             transform: translateX(-5%);

  589.   }

  590. }

  591. 

  592. /*--------------

  593.      Flips

  594. ---------------*/

  595. 

  596. .flip.transition.in,

  597. .flip.transition.out {

  598.   -webkit-animation-duration: 600ms;

  599.           animation-duration: 600ms;

  600. }

  601. .horizontal.flip.transition.in {

  602.   -webkit-animation-name: horizontalFlipIn;

  603.           animation-name: horizontalFlipIn;

  604. }

  605. .horizontal.flip.transition.out {

  606.   -webkit-animation-name: horizontalFlipOut;

  607.           animation-name: horizontalFlipOut;

  608. }

  609. .vertical.flip.transition.in {

  610.   -webkit-animation-name: verticalFlipIn;

  611.           animation-name: verticalFlipIn;

  612. }

  613. .vertical.flip.transition.out {

  614.   -webkit-animation-name: verticalFlipOut;

  615.           animation-name: verticalFlipOut;

  616. }

  617. 

  618. /* In */

  619. @-webkit-keyframes horizontalFlipIn {

  620.   0% {

  621.     -webkit-transform: perspective(2000px) rotateY(-90deg);

  622.             transform: perspective(2000px) rotateY(-90deg);

  623.     opacity: 0;

  624.   }

  625.   100% {

  626.     -webkit-transform: perspective(2000px) rotateY(0deg);

  627.             transform: perspective(2000px) rotateY(0deg);

  628.     opacity: 1;

  629.   }

  630. }

  631. @keyframes horizontalFlipIn {

  632.   0% {

  633.     -webkit-transform: perspective(2000px) rotateY(-90deg);

  634.             transform: perspective(2000px) rotateY(-90deg);

  635.     opacity: 0;

  636.   }

  637.   100% {

  638.     -webkit-transform: perspective(2000px) rotateY(0deg);

  639.             transform: perspective(2000px) rotateY(0deg);

  640.     opacity: 1;

  641.   }

  642. }

  643. @-webkit-keyframes verticalFlipIn {

  644.   0% {

  645.     -webkit-transform: perspective(2000px) rotateX(-90deg);

  646.             transform: perspective(2000px) rotateX(-90deg);

  647.     opacity: 0;

  648.   }

  649.   100% {

  650.     -webkit-transform: perspective(2000px) rotateX(0deg);

  651.             transform: perspective(2000px) rotateX(0deg);

  652.     opacity: 1;

  653.   }

  654. }

  655. @keyframes verticalFlipIn {

  656.   0% {

  657.     -webkit-transform: perspective(2000px) rotateX(-90deg);

  658.             transform: perspective(2000px) rotateX(-90deg);

  659.     opacity: 0;

  660.   }

  661.   100% {

  662.     -webkit-transform: perspective(2000px) rotateX(0deg);

  663.             transform: perspective(2000px) rotateX(0deg);

  664.     opacity: 1;

  665.   }

  666. }

  667. 

  668. /* Out */

  669. @-webkit-keyframes horizontalFlipOut {

  670.   0% {

  671.     -webkit-transform: perspective(2000px) rotateY(0deg);

  672.             transform: perspective(2000px) rotateY(0deg);

  673.     opacity: 1;

  674.   }

  675.   100% {

  676.     -webkit-transform: perspective(2000px) rotateY(90deg);

  677.             transform: perspective(2000px) rotateY(90deg);

  678.     opacity: 0;

  679.   }

  680. }

  681. @keyframes horizontalFlipOut {

  682.   0% {

  683.     -webkit-transform: perspective(2000px) rotateY(0deg);

  684.             transform: perspective(2000px) rotateY(0deg);

  685.     opacity: 1;

  686.   }

  687.   100% {

  688.     -webkit-transform: perspective(2000px) rotateY(90deg);

  689.             transform: perspective(2000px) rotateY(90deg);

  690.     opacity: 0;

  691.   }

  692. }

  693. @-webkit-keyframes verticalFlipOut {

  694.   0% {

  695.     -webkit-transform: perspective(2000px) rotateX(0deg);

  696.             transform: perspective(2000px) rotateX(0deg);

  697.     opacity: 1;

  698.   }

  699.   100% {

  700.     -webkit-transform: perspective(2000px) rotateX(-90deg);

  701.             transform: perspective(2000px) rotateX(-90deg);

  702.     opacity: 0;

  703.   }

  704. }

  705. @keyframes verticalFlipOut {

  706.   0% {

  707.     -webkit-transform: perspective(2000px) rotateX(0deg);

  708.             transform: perspective(2000px) rotateX(0deg);

  709.     opacity: 1;

  710.   }

  711.   100% {

  712.     -webkit-transform: perspective(2000px) rotateX(-90deg);

  713.             transform: perspective(2000px) rotateX(-90deg);

  714.     opacity: 0;

  715.   }

  716. }

  717. 

  718. /*--------------

  719.       Scale

  720. ---------------*/

  721. 

  722. .scale.transition.in {

  723.   -webkit-animation-name: scaleIn;

  724.           animation-name: scaleIn;

  725. }

  726. .scale.transition.out {

  727.   -webkit-animation-name: scaleOut;

  728.           animation-name: scaleOut;

  729. }

  730. @-webkit-keyframes scaleIn {

  731.   0% {

  732.     opacity: 0;

  733.     -webkit-transform: scale(0.8);

  734.             transform: scale(0.8);

  735.   }

  736.   100% {

  737.     opacity: 1;

  738.     -webkit-transform: scale(1);

  739.             transform: scale(1);

  740.   }

  741. }

  742. @keyframes scaleIn {

  743.   0% {

  744.     opacity: 0;

  745.     -webkit-transform: scale(0.8);

  746.             transform: scale(0.8);

  747.   }

  748.   100% {

  749.     opacity: 1;

  750.     -webkit-transform: scale(1);

  751.             transform: scale(1);

  752.   }

  753. }

  754. 

  755. /* Out */

  756. @-webkit-keyframes scaleOut {

  757.   0% {

  758.     opacity: 1;

  759.     -webkit-transform: scale(1);

  760.             transform: scale(1);

  761.   }

  762.   100% {

  763.     opacity: 0;

  764.     -webkit-transform: scale(0.9);

  765.             transform: scale(0.9);

  766.   }

  767. }

  768. @keyframes scaleOut {

  769.   0% {

  770.     opacity: 1;

  771.     -webkit-transform: scale(1);

  772.             transform: scale(1);

  773.   }

  774.   100% {

  775.     opacity: 0;

  776.     -webkit-transform: scale(0.9);

  777.             transform: scale(0.9);

  778.   }

  779. }

  780. 

  781. /*--------------

  782.       Fly

  783. ---------------*/

  784. 

  785. 

  786. /* Inward */

  787. .transition.fly {

  788.   -webkit-animation-duration: 0.6s;

  789.           animation-duration: 0.6s;

  790.   -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

  791.           transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

  792. }

  793. .transition.fly.in {

  794.   -webkit-animation-name: flyIn;

  795.           animation-name: flyIn;

  796. }

  797. .transition[class*="fly up"].in {

  798.   -webkit-animation-name: flyInUp;

  799.           animation-name: flyInUp;

  800. }

  801. .transition[class*="fly down"].in {

  802.   -webkit-animation-name: flyInDown;

  803.           animation-name: flyInDown;

  804. }

  805. .transition[class*="fly left"].in {

  806.   -webkit-animation-name: flyInLeft;

  807.           animation-name: flyInLeft;

  808. }

  809. .transition[class*="fly right"].in {

  810.   -webkit-animation-name: flyInRight;

  811.           animation-name: flyInRight;

  812. }

  813. 

  814. /* Outward */

  815. .transition.fly.out {

  816.   -webkit-animation-name: flyOut;

  817.           animation-name: flyOut;

  818. }

  819. .transition[class*="fly up"].out {

  820.   -webkit-animation-name: flyOutUp;

  821.           animation-name: flyOutUp;

  822. }

  823. .transition[class*="fly down"].out {

  824.   -webkit-animation-name: flyOutDown;

  825.           animation-name: flyOutDown;

  826. }

  827. .transition[class*="fly left"].out {

  828.   -webkit-animation-name: flyOutLeft;

  829.           animation-name: flyOutLeft;

  830. }

  831. .transition[class*="fly right"].out {

  832.   -webkit-animation-name: flyOutRight;

  833.           animation-name: flyOutRight;

  834. }

  835. 

  836. /* In */

  837. @-webkit-keyframes flyIn {

  838.   0% {

  839.     opacity: 0;

  840.     -webkit-transform: scale3d(0.3, 0.3, 0.3);

  841.             transform: scale3d(0.3, 0.3, 0.3);

  842.   }

  843.   20% {

  844.     -webkit-transform: scale3d(1.1, 1.1, 1.1);

  845.             transform: scale3d(1.1, 1.1, 1.1);

  846.   }

  847.   40% {

  848.     -webkit-transform: scale3d(0.9, 0.9, 0.9);

  849.             transform: scale3d(0.9, 0.9, 0.9);

  850.   }

  851.   60% {

  852.     opacity: 1;

  853.     -webkit-transform: scale3d(1.03, 1.03, 1.03);

  854.             transform: scale3d(1.03, 1.03, 1.03);

  855.   }

  856.   80% {

  857.     -webkit-transform: scale3d(0.97, 0.97, 0.97);

  858.             transform: scale3d(0.97, 0.97, 0.97);

  859.   }

  860.   100% {

  861.     opacity: 1;

  862.     -webkit-transform: scale3d(1, 1, 1);

  863.             transform: scale3d(1, 1, 1);

  864.   }

  865. }

  866. @keyframes flyIn {

  867.   0% {

  868.     opacity: 0;

  869.     -webkit-transform: scale3d(0.3, 0.3, 0.3);

  870.             transform: scale3d(0.3, 0.3, 0.3);

  871.   }

  872.   20% {

  873.     -webkit-transform: scale3d(1.1, 1.1, 1.1);

  874.             transform: scale3d(1.1, 1.1, 1.1);

  875.   }

  876.   40% {

  877.     -webkit-transform: scale3d(0.9, 0.9, 0.9);

  878.             transform: scale3d(0.9, 0.9, 0.9);

  879.   }

  880.   60% {

  881.     opacity: 1;

  882.     -webkit-transform: scale3d(1.03, 1.03, 1.03);

  883.             transform: scale3d(1.03, 1.03, 1.03);

  884.   }

  885.   80% {

  886.     -webkit-transform: scale3d(0.97, 0.97, 0.97);

  887.             transform: scale3d(0.97, 0.97, 0.97);

  888.   }

  889.   100% {

  890.     opacity: 1;

  891.     -webkit-transform: scale3d(1, 1, 1);

  892.             transform: scale3d(1, 1, 1);

  893.   }

  894. }

  895. @-webkit-keyframes flyInUp {

  896.   0% {

  897.     opacity: 0;

  898.     -webkit-transform: translate3d(0, 1500px, 0);

  899.             transform: translate3d(0, 1500px, 0);

  900.   }

  901.   60% {

  902.     opacity: 1;

  903.     -webkit-transform: translate3d(0, -20px, 0);

  904.             transform: translate3d(0, -20px, 0);

  905.   }

  906.   75% {

  907.     -webkit-transform: translate3d(0, 10px, 0);

  908.             transform: translate3d(0, 10px, 0);

  909.   }

  910.   90% {

  911.     -webkit-transform: translate3d(0, -5px, 0);

  912.             transform: translate3d(0, -5px, 0);

  913.   }

  914.   100% {

  915.     -webkit-transform: translate3d(0, 0, 0);

  916.             transform: translate3d(0, 0, 0);

  917.   }

  918. }

  919. @keyframes flyInUp {

  920.   0% {

  921.     opacity: 0;

  922.     -webkit-transform: translate3d(0, 1500px, 0);

  923.             transform: translate3d(0, 1500px, 0);

  924.   }

  925.   60% {

  926.     opacity: 1;

  927.     -webkit-transform: translate3d(0, -20px, 0);

  928.             transform: translate3d(0, -20px, 0);

  929.   }

  930.   75% {

  931.     -webkit-transform: translate3d(0, 10px, 0);

  932.             transform: translate3d(0, 10px, 0);

  933.   }

  934.   90% {

  935.     -webkit-transform: translate3d(0, -5px, 0);

  936.             transform: translate3d(0, -5px, 0);

  937.   }

  938.   100% {

  939.     -webkit-transform: translate3d(0, 0, 0);

  940.             transform: translate3d(0, 0, 0);

  941.   }

  942. }

  943. @-webkit-keyframes flyInDown {

  944.   0% {

  945.     opacity: 0;

  946.     -webkit-transform: translate3d(0, -1500px, 0);

  947.             transform: translate3d(0, -1500px, 0);

  948.   }

  949.   60% {

  950.     opacity: 1;

  951.     -webkit-transform: translate3d(0, 25px, 0);

  952.             transform: translate3d(0, 25px, 0);

  953.   }

  954.   75% {

  955.     -webkit-transform: translate3d(0, -10px, 0);

  956.             transform: translate3d(0, -10px, 0);

  957.   }

  958.   90% {

  959.     -webkit-transform: translate3d(0, 5px, 0);

  960.             transform: translate3d(0, 5px, 0);

  961.   }

  962.   100% {

  963.     -webkit-transform: none;

  964.             transform: none;

  965.   }

  966. }

  967. @keyframes flyInDown {

  968.   0% {

  969.     opacity: 0;

  970.     -webkit-transform: translate3d(0, -1500px, 0);

  971.             transform: translate3d(0, -1500px, 0);

  972.   }

  973.   60% {

  974.     opacity: 1;

  975.     -webkit-transform: translate3d(0, 25px, 0);

  976.             transform: translate3d(0, 25px, 0);

  977.   }

  978.   75% {

  979.     -webkit-transform: translate3d(0, -10px, 0);

  980.             transform: translate3d(0, -10px, 0);

  981.   }

  982.   90% {

  983.     -webkit-transform: translate3d(0, 5px, 0);

  984.             transform: translate3d(0, 5px, 0);

  985.   }

  986.   100% {

  987.     -webkit-transform: none;

  988.             transform: none;

  989.   }

  990. }

  991. @-webkit-keyframes flyInLeft {

  992.   0% {

  993.     opacity: 0;

  994.     -webkit-transform: translate3d(1500px, 0, 0);

  995.             transform: translate3d(1500px, 0, 0);

  996.   }

  997.   60% {

  998.     opacity: 1;

  999.     -webkit-transform: translate3d(-25px, 0, 0);

  1000.             transform: translate3d(-25px, 0, 0);

  1001.   }

  1002.   75% {

  1003.     -webkit-transform: translate3d(10px, 0, 0);

  1004.             transform: translate3d(10px, 0, 0);

  1005.   }

  1006.   90% {

  1007.     -webkit-transform: translate3d(-5px, 0, 0);

  1008.             transform: translate3d(-5px, 0, 0);

  1009.   }

  1010.   100% {

  1011.     -webkit-transform: none;

  1012.             transform: none;

  1013.   }

  1014. }

  1015. @keyframes flyInLeft {

  1016.   0% {

  1017.     opacity: 0;

  1018.     -webkit-transform: translate3d(1500px, 0, 0);

  1019.             transform: translate3d(1500px, 0, 0);

  1020.   }

  1021.   60% {

  1022.     opacity: 1;

  1023.     -webkit-transform: translate3d(-25px, 0, 0);

  1024.             transform: translate3d(-25px, 0, 0);

  1025.   }

  1026.   75% {

  1027.     -webkit-transform: translate3d(10px, 0, 0);

  1028.             transform: translate3d(10px, 0, 0);

  1029.   }

  1030.   90% {

  1031.     -webkit-transform: translate3d(-5px, 0, 0);

  1032.             transform: translate3d(-5px, 0, 0);

  1033.   }

  1034.   100% {

  1035.     -webkit-transform: none;

  1036.             transform: none;

  1037.   }

  1038. }

  1039. @-webkit-keyframes flyInRight {

  1040.   0% {

  1041.     opacity: 0;

  1042.     -webkit-transform: translate3d(-1500px, 0, 0);

  1043.             transform: translate3d(-1500px, 0, 0);

  1044.   }

  1045.   60% {

  1046.     opacity: 1;

  1047.     -webkit-transform: translate3d(25px, 0, 0);

  1048.             transform: translate3d(25px, 0, 0);

  1049.   }

  1050.   75% {

  1051.     -webkit-transform: translate3d(-10px, 0, 0);

  1052.             transform: translate3d(-10px, 0, 0);

  1053.   }

  1054.   90% {

  1055.     -webkit-transform: translate3d(5px, 0, 0);

  1056.             transform: translate3d(5px, 0, 0);

  1057.   }

  1058.   100% {

  1059.     -webkit-transform: none;

  1060.             transform: none;

  1061.   }

  1062. }

  1063. @keyframes flyInRight {

  1064.   0% {

  1065.     opacity: 0;

  1066.     -webkit-transform: translate3d(-1500px, 0, 0);

  1067.             transform: translate3d(-1500px, 0, 0);

  1068.   }

  1069.   60% {

  1070.     opacity: 1;

  1071.     -webkit-transform: translate3d(25px, 0, 0);

  1072.             transform: translate3d(25px, 0, 0);

  1073.   }

  1074.   75% {

  1075.     -webkit-transform: translate3d(-10px, 0, 0);

  1076.             transform: translate3d(-10px, 0, 0);

  1077.   }

  1078.   90% {

  1079.     -webkit-transform: translate3d(5px, 0, 0);

  1080.             transform: translate3d(5px, 0, 0);

  1081.   }

  1082.   100% {

  1083.     -webkit-transform: none;

  1084.             transform: none;

  1085.   }

  1086. }

  1087. 

  1088. /* Out */

  1089. @-webkit-keyframes flyOut {

  1090.   20% {

  1091.     -webkit-transform: scale3d(0.9, 0.9, 0.9);

  1092.             transform: scale3d(0.9, 0.9, 0.9);

  1093.   }

  1094.   50%,

  1095.   55% {

  1096.     opacity: 1;

  1097.     -webkit-transform: scale3d(1.1, 1.1, 1.1);

  1098.             transform: scale3d(1.1, 1.1, 1.1);

  1099.   }

  1100.   100% {

  1101.     opacity: 0;

  1102.     -webkit-transform: scale3d(0.3, 0.3, 0.3);

  1103.             transform: scale3d(0.3, 0.3, 0.3);

  1104.   }

  1105. }

  1106. @keyframes flyOut {

  1107.   20% {

  1108.     -webkit-transform: scale3d(0.9, 0.9, 0.9);

  1109.             transform: scale3d(0.9, 0.9, 0.9);

  1110.   }

  1111.   50%,

  1112.   55% {

  1113.     opacity: 1;

  1114.     -webkit-transform: scale3d(1.1, 1.1, 1.1);

  1115.             transform: scale3d(1.1, 1.1, 1.1);

  1116.   }

  1117.   100% {

  1118.     opacity: 0;

  1119.     -webkit-transform: scale3d(0.3, 0.3, 0.3);

  1120.             transform: scale3d(0.3, 0.3, 0.3);

  1121.   }

  1122. }

  1123. @-webkit-keyframes flyOutUp {

  1124.   20% {

  1125.     -webkit-transform: translate3d(0, 10px, 0);

  1126.             transform: translate3d(0, 10px, 0);

  1127.   }

  1128.   40%,

  1129.   45% {

  1130.     opacity: 1;

  1131.     -webkit-transform: translate3d(0, -20px, 0);

  1132.             transform: translate3d(0, -20px, 0);

  1133.   }

  1134.   100% {

  1135.     opacity: 0;

  1136.     -webkit-transform: translate3d(0, 2000px, 0);

  1137.             transform: translate3d(0, 2000px, 0);

  1138.   }

  1139. }

  1140. @keyframes flyOutUp {

  1141.   20% {

  1142.     -webkit-transform: translate3d(0, 10px, 0);

  1143.             transform: translate3d(0, 10px, 0);

  1144.   }

  1145.   40%,

  1146.   45% {

  1147.     opacity: 1;

  1148.     -webkit-transform: translate3d(0, -20px, 0);

  1149.             transform: translate3d(0, -20px, 0);

  1150.   }

  1151.   100% {

  1152.     opacity: 0;

  1153.     -webkit-transform: translate3d(0, 2000px, 0);

  1154.             transform: translate3d(0, 2000px, 0);

  1155.   }

  1156. }

  1157. @-webkit-keyframes flyOutDown {

  1158.   20% {

  1159.     -webkit-transform: translate3d(0, -10px, 0);

  1160.             transform: translate3d(0, -10px, 0);

  1161.   }

  1162.   40%,

  1163.   45% {

  1164.     opacity: 1;

  1165.     -webkit-transform: translate3d(0, 20px, 0);

  1166.             transform: translate3d(0, 20px, 0);

  1167.   }

  1168.   100% {

  1169.     opacity: 0;

  1170.     -webkit-transform: translate3d(0, -2000px, 0);

  1171.             transform: translate3d(0, -2000px, 0);

  1172.   }

  1173. }

  1174. @keyframes flyOutDown {

  1175.   20% {

  1176.     -webkit-transform: translate3d(0, -10px, 0);

  1177.             transform: translate3d(0, -10px, 0);

  1178.   }

  1179.   40%,

  1180.   45% {

  1181.     opacity: 1;

  1182.     -webkit-transform: translate3d(0, 20px, 0);

  1183.             transform: translate3d(0, 20px, 0);

  1184.   }

  1185.   100% {

  1186.     opacity: 0;

  1187.     -webkit-transform: translate3d(0, -2000px, 0);

  1188.             transform: translate3d(0, -2000px, 0);

  1189.   }

  1190. }

  1191. @-webkit-keyframes flyOutRight {

  1192.   20% {

  1193.     opacity: 1;

  1194.     -webkit-transform: translate3d(20px, 0, 0);

  1195.             transform: translate3d(20px, 0, 0);

  1196.   }

  1197.   100% {

  1198.     opacity: 0;

  1199.     -webkit-transform: translate3d(-2000px, 0, 0);

  1200.             transform: translate3d(-2000px, 0, 0);

  1201.   }

  1202. }

  1203. @keyframes flyOutRight {

  1204.   20% {

  1205.     opacity: 1;

  1206.     -webkit-transform: translate3d(20px, 0, 0);

  1207.             transform: translate3d(20px, 0, 0);

  1208.   }

  1209.   100% {

  1210.     opacity: 0;

  1211.     -webkit-transform: translate3d(-2000px, 0, 0);

  1212.             transform: translate3d(-2000px, 0, 0);

  1213.   }

  1214. }

  1215. @-webkit-keyframes flyOutLeft {

  1216.   20% {

  1217.     opacity: 1;

  1218.     -webkit-transform: translate3d(-20px, 0, 0);

  1219.             transform: translate3d(-20px, 0, 0);

  1220.   }

  1221.   100% {

  1222.     opacity: 0;

  1223.     -webkit-transform: translate3d(2000px, 0, 0);

  1224.             transform: translate3d(2000px, 0, 0);

  1225.   }

  1226. }

  1227. @keyframes flyOutLeft {

  1228.   20% {

  1229.     opacity: 1;

  1230.     -webkit-transform: translate3d(-20px, 0, 0);

  1231.             transform: translate3d(-20px, 0, 0);

  1232.   }

  1233.   100% {

  1234.     opacity: 0;

  1235.     -webkit-transform: translate3d(2000px, 0, 0);

  1236.             transform: translate3d(2000px, 0, 0);

  1237.   }

  1238. }

  1239. 

  1240. /*--------------

  1241.      Slide

  1242. ---------------*/

  1243. 

  1244. .transition.slide.in,

  1245. .transition[class*="slide down"].in {

  1246.   -webkit-animation-name: slideInY;

  1247.           animation-name: slideInY;

  1248.   -webkit-transform-origin: top center;

  1249.           transform-origin: top center;

  1250. }

  1251. .transition[class*="slide up"].in {

  1252.   -webkit-animation-name: slideInY;

  1253.           animation-name: slideInY;

  1254.   -webkit-transform-origin: bottom center;

  1255.           transform-origin: bottom center;

  1256. }

  1257. .transition[class*="slide left"].in {

  1258.   -webkit-animation-name: slideInX;

  1259.           animation-name: slideInX;

  1260.   -webkit-transform-origin: center right;

  1261.           transform-origin: center right;

  1262. }

  1263. .transition[class*="slide right"].in {

  1264.   -webkit-animation-name: slideInX;

  1265.           animation-name: slideInX;

  1266.   -webkit-transform-origin: center left;

  1267.           transform-origin: center left;

  1268. }

  1269. .transition.slide.out,

  1270. .transition[class*="slide down"].out {

  1271.   -webkit-animation-name: slideOutY;

  1272.           animation-name: slideOutY;

  1273.   -webkit-transform-origin: top center;

  1274.           transform-origin: top center;

  1275. }

  1276. .transition[class*="slide up"].out {

  1277.   -webkit-animation-name: slideOutY;

  1278.           animation-name: slideOutY;

  1279.   -webkit-transform-origin: bottom center;

  1280.           transform-origin: bottom center;

  1281. }

  1282. .transition[class*="slide left"].out {

  1283.   -webkit-animation-name: slideOutX;

  1284.           animation-name: slideOutX;

  1285.   -webkit-transform-origin: center right;

  1286.           transform-origin: center right;

  1287. }

  1288. .transition[class*="slide right"].out {

  1289.   -webkit-animation-name: slideOutX;

  1290.           animation-name: slideOutX;

  1291.   -webkit-transform-origin: center left;

  1292.           transform-origin: center left;

  1293. }

  1294. 

  1295. /* In */

  1296. @-webkit-keyframes slideInY {

  1297.   0% {

  1298.     opacity: 0;

  1299.     -webkit-transform: scaleY(0);

  1300.             transform: scaleY(0);

  1301.   }

  1302.   100% {

  1303.     opacity: 1;

  1304.     -webkit-transform: scaleY(1);

  1305.             transform: scaleY(1);

  1306.   }

  1307. }

  1308. @keyframes slideInY {

  1309.   0% {

  1310.     opacity: 0;

  1311.     -webkit-transform: scaleY(0);

  1312.             transform: scaleY(0);

  1313.   }

  1314.   100% {

  1315.     opacity: 1;

  1316.     -webkit-transform: scaleY(1);

  1317.             transform: scaleY(1);

  1318.   }

  1319. }

  1320. @-webkit-keyframes slideInX {

  1321.   0% {

  1322.     opacity: 0;

  1323.     -webkit-transform: scaleX(0);

  1324.             transform: scaleX(0);

  1325.   }

  1326.   100% {

  1327.     opacity: 1;

  1328.     -webkit-transform: scaleX(1);

  1329.             transform: scaleX(1);

  1330.   }

  1331. }

  1332. @keyframes slideInX {

  1333.   0% {

  1334.     opacity: 0;

  1335.     -webkit-transform: scaleX(0);

  1336.             transform: scaleX(0);

  1337.   }

  1338.   100% {

  1339.     opacity: 1;

  1340.     -webkit-transform: scaleX(1);

  1341.             transform: scaleX(1);

  1342.   }

  1343. }

  1344. 

  1345. /* Out */

  1346. @-webkit-keyframes slideOutY {

  1347.   0% {

  1348.     opacity: 1;

  1349.     -webkit-transform: scaleY(1);

  1350.             transform: scaleY(1);

  1351.   }

  1352.   100% {

  1353.     opacity: 0;

  1354.     -webkit-transform: scaleY(0);

  1355.             transform: scaleY(0);

  1356.   }

  1357. }

  1358. @keyframes slideOutY {

  1359.   0% {

  1360.     opacity: 1;

  1361.     -webkit-transform: scaleY(1);

  1362.             transform: scaleY(1);

  1363.   }

  1364.   100% {

  1365.     opacity: 0;

  1366.     -webkit-transform: scaleY(0);

  1367.             transform: scaleY(0);

  1368.   }

  1369. }

  1370. @-webkit-keyframes slideOutX {

  1371.   0% {

  1372.     opacity: 1;

  1373.     -webkit-transform: scaleX(1);

  1374.             transform: scaleX(1);

  1375.   }

  1376.   100% {

  1377.     opacity: 0;

  1378.     -webkit-transform: scaleX(0);

  1379.             transform: scaleX(0);

  1380.   }

  1381. }

  1382. @keyframes slideOutX {

  1383.   0% {

  1384.     opacity: 1;

  1385.     -webkit-transform: scaleX(1);

  1386.             transform: scaleX(1);

  1387.   }

  1388.   100% {

  1389.     opacity: 0;

  1390.     -webkit-transform: scaleX(0);

  1391.             transform: scaleX(0);

  1392.   }

  1393. }

  1394. 

  1395. /*--------------

  1396.      Swing

  1397. ---------------*/

  1398. 

  1399. .transition.swing {

  1400.   -webkit-animation-duration: 800ms;

  1401.           animation-duration: 800ms;

  1402. }

  1403. .transition[class*="swing down"].in {

  1404.   -webkit-animation-name: swingInX;

  1405.           animation-name: swingInX;

  1406.   -webkit-transform-origin: top center;

  1407.           transform-origin: top center;

  1408. }

  1409. .transition[class*="swing up"].in {

  1410.   -webkit-animation-name: swingInX;

  1411.           animation-name: swingInX;

  1412.   -webkit-transform-origin: bottom center;

  1413.           transform-origin: bottom center;

  1414. }

  1415. .transition[class*="swing left"].in {

  1416.   -webkit-animation-name: swingInY;

  1417.           animation-name: swingInY;

  1418.   -webkit-transform-origin: center right;

  1419.           transform-origin: center right;

  1420. }

  1421. .transition[class*="swing right"].in {

  1422.   -webkit-animation-name: swingInY;

  1423.           animation-name: swingInY;

  1424.   -webkit-transform-origin: center left;

  1425.           transform-origin: center left;

  1426. }

  1427. .transition.swing.out,

  1428. .transition[class*="swing down"].out {

  1429.   -webkit-animation-name: swingOutX;

  1430.           animation-name: swingOutX;

  1431.   -webkit-transform-origin: top center;

  1432.           transform-origin: top center;

  1433. }

  1434. .transition[class*="swing up"].out {

  1435.   -webkit-animation-name: swingOutX;

  1436.           animation-name: swingOutX;

  1437.   -webkit-transform-origin: bottom center;

  1438.           transform-origin: bottom center;

  1439. }

  1440. .transition[class*="swing left"].out {

  1441.   -webkit-animation-name: swingOutY;

  1442.           animation-name: swingOutY;

  1443.   -webkit-transform-origin: center right;

  1444.           transform-origin: center right;

  1445. }

  1446. .transition[class*="swing right"].out {

  1447.   -webkit-animation-name: swingOutY;

  1448.           animation-name: swingOutY;

  1449.   -webkit-transform-origin: center left;

  1450.           transform-origin: center left;

  1451. }

  1452. 

  1453. /* In */

  1454. @-webkit-keyframes swingInX {

  1455.   0% {

  1456.     -webkit-transform: perspective(1000px) rotateX(90deg);

  1457.             transform: perspective(1000px) rotateX(90deg);

  1458.     opacity: 0;

  1459.   }

  1460.   40% {

  1461.     -webkit-transform: perspective(1000px) rotateX(-30deg);

  1462.             transform: perspective(1000px) rotateX(-30deg);

  1463.     opacity: 1;

  1464.   }

  1465.   60% {

  1466.     -webkit-transform: perspective(1000px) rotateX(15deg);

  1467.             transform: perspective(1000px) rotateX(15deg);

  1468.   }

  1469.   80% {

  1470.     -webkit-transform: perspective(1000px) rotateX(-7.5deg);

  1471.             transform: perspective(1000px) rotateX(-7.5deg);

  1472.   }

  1473.   100% {

  1474.     -webkit-transform: perspective(1000px) rotateX(0deg);

  1475.             transform: perspective(1000px) rotateX(0deg);

  1476.   }

  1477. }

  1478. @keyframes swingInX {

  1479.   0% {

  1480.     -webkit-transform: perspective(1000px) rotateX(90deg);

  1481.             transform: perspective(1000px) rotateX(90deg);

  1482.     opacity: 0;

  1483.   }

  1484.   40% {

  1485.     -webkit-transform: perspective(1000px) rotateX(-30deg);

  1486.             transform: perspective(1000px) rotateX(-30deg);

  1487.     opacity: 1;

  1488.   }

  1489.   60% {

  1490.     -webkit-transform: perspective(1000px) rotateX(15deg);

  1491.             transform: perspective(1000px) rotateX(15deg);

  1492.   }

  1493.   80% {

  1494.     -webkit-transform: perspective(1000px) rotateX(-7.5deg);

  1495.             transform: perspective(1000px) rotateX(-7.5deg);

  1496.   }

  1497.   100% {

  1498.     -webkit-transform: perspective(1000px) rotateX(0deg);

  1499.             transform: perspective(1000px) rotateX(0deg);

  1500.   }

  1501. }

  1502. @-webkit-keyframes swingInY {

  1503.   0% {

  1504.     -webkit-transform: perspective(1000px) rotateY(-90deg);

  1505.             transform: perspective(1000px) rotateY(-90deg);

  1506.     opacity: 0;

  1507.   }

  1508.   40% {

  1509.     -webkit-transform: perspective(1000px) rotateY(30deg);

  1510.             transform: perspective(1000px) rotateY(30deg);

  1511.     opacity: 1;

  1512.   }

  1513.   60% {

  1514.     -webkit-transform: perspective(1000px) rotateY(-17.5deg);

  1515.             transform: perspective(1000px) rotateY(-17.5deg);

  1516.   }

  1517.   80% {

  1518.     -webkit-transform: perspective(1000px) rotateY(7.5deg);

  1519.             transform: perspective(1000px) rotateY(7.5deg);

  1520.   }

  1521.   100% {

  1522.     -webkit-transform: perspective(1000px) rotateY(0deg);

  1523.             transform: perspective(1000px) rotateY(0deg);

  1524.   }

  1525. }

  1526. @keyframes swingInY {

  1527.   0% {

  1528.     -webkit-transform: perspective(1000px) rotateY(-90deg);

  1529.             transform: perspective(1000px) rotateY(-90deg);

  1530.     opacity: 0;

  1531.   }

  1532.   40% {

  1533.     -webkit-transform: perspective(1000px) rotateY(30deg);

  1534.             transform: perspective(1000px) rotateY(30deg);

  1535.     opacity: 1;

  1536.   }

  1537.   60% {

  1538.     -webkit-transform: perspective(1000px) rotateY(-17.5deg);

  1539.             transform: perspective(1000px) rotateY(-17.5deg);

  1540.   }

  1541.   80% {

  1542.     -webkit-transform: perspective(1000px) rotateY(7.5deg);

  1543.             transform: perspective(1000px) rotateY(7.5deg);

  1544.   }

  1545.   100% {

  1546.     -webkit-transform: perspective(1000px) rotateY(0deg);

  1547.             transform: perspective(1000px) rotateY(0deg);

  1548.   }

  1549. }

  1550. 

  1551. /* Out */

  1552. @-webkit-keyframes swingOutX {

  1553.   0% {

  1554.     -webkit-transform: perspective(1000px) rotateX(0deg);

  1555.             transform: perspective(1000px) rotateX(0deg);

  1556.   }

  1557.   40% {

  1558.     -webkit-transform: perspective(1000px) rotateX(-7.5deg);

  1559.             transform: perspective(1000px) rotateX(-7.5deg);

  1560.   }

  1561.   60% {

  1562.     -webkit-transform: perspective(1000px) rotateX(17.5deg);

  1563.             transform: perspective(1000px) rotateX(17.5deg);

  1564.   }

  1565.   80% {

  1566.     -webkit-transform: perspective(1000px) rotateX(-30deg);

  1567.             transform: perspective(1000px) rotateX(-30deg);

  1568.     opacity: 1;

  1569.   }

  1570.   100% {

  1571.     -webkit-transform: perspective(1000px) rotateX(90deg);

  1572.             transform: perspective(1000px) rotateX(90deg);

  1573.     opacity: 0;

  1574.   }

  1575. }

  1576. @keyframes swingOutX {

  1577.   0% {

  1578.     -webkit-transform: perspective(1000px) rotateX(0deg);

  1579.             transform: perspective(1000px) rotateX(0deg);

  1580.   }

  1581.   40% {

  1582.     -webkit-transform: perspective(1000px) rotateX(-7.5deg);

  1583.             transform: perspective(1000px) rotateX(-7.5deg);

  1584.   }

  1585.   60% {

  1586.     -webkit-transform: perspective(1000px) rotateX(17.5deg);

  1587.             transform: perspective(1000px) rotateX(17.5deg);

  1588.   }

  1589.   80% {

  1590.     -webkit-transform: perspective(1000px) rotateX(-30deg);

  1591.             transform: perspective(1000px) rotateX(-30deg);

  1592.     opacity: 1;

  1593.   }

  1594.   100% {

  1595.     -webkit-transform: perspective(1000px) rotateX(90deg);

  1596.             transform: perspective(1000px) rotateX(90deg);

  1597.     opacity: 0;

  1598.   }

  1599. }

  1600. @-webkit-keyframes swingOutY {

  1601.   0% {

  1602.     -webkit-transform: perspective(1000px) rotateY(0deg);

  1603.             transform: perspective(1000px) rotateY(0deg);

  1604.   }

  1605.   40% {

  1606.     -webkit-transform: perspective(1000px) rotateY(7.5deg);

  1607.             transform: perspective(1000px) rotateY(7.5deg);

  1608.   }

  1609.   60% {

  1610.     -webkit-transform: perspective(1000px) rotateY(-10deg);

  1611.             transform: perspective(1000px) rotateY(-10deg);

  1612.   }

  1613.   80% {

  1614.     -webkit-transform: perspective(1000px) rotateY(30deg);

  1615.             transform: perspective(1000px) rotateY(30deg);

  1616.     opacity: 1;

  1617.   }

  1618.   100% {

  1619.     -webkit-transform: perspective(1000px) rotateY(-90deg);

  1620.             transform: perspective(1000px) rotateY(-90deg);

  1621.     opacity: 0;

  1622.   }

  1623. }

  1624. @keyframes swingOutY {

  1625.   0% {

  1626.     -webkit-transform: perspective(1000px) rotateY(0deg);

  1627.             transform: perspective(1000px) rotateY(0deg);

  1628.   }

  1629.   40% {

  1630.     -webkit-transform: perspective(1000px) rotateY(7.5deg);

  1631.             transform: perspective(1000px) rotateY(7.5deg);

  1632.   }

  1633.   60% {

  1634.     -webkit-transform: perspective(1000px) rotateY(-10deg);

  1635.             transform: perspective(1000px) rotateY(-10deg);

  1636.   }

  1637.   80% {

  1638.     -webkit-transform: perspective(1000px) rotateY(30deg);

  1639.             transform: perspective(1000px) rotateY(30deg);

  1640.     opacity: 1;

  1641.   }

  1642.   100% {

  1643.     -webkit-transform: perspective(1000px) rotateY(-90deg);

  1644.             transform: perspective(1000px) rotateY(-90deg);

  1645.     opacity: 0;

  1646.   }

  1647. }

  1648. 

  1649. /*--------------

  1650.       Zoom

  1651. ---------------*/

  1652. 

  1653. .transition.zoom.in {

  1654.   -webkit-animation-name: zoomIn;

  1655.           animation-name: zoomIn;

  1656. }

  1657. .transition.zoom.out {

  1658.   -webkit-animation-name: zoomOut;

  1659.           animation-name: zoomOut;

  1660. }

  1661. @-webkit-keyframes zoomIn {

  1662.   0% {

  1663.     opacity: 1;

  1664.     -webkit-transform: scale(0);

  1665.             transform: scale(0);

  1666.   }

  1667.   100% {

  1668.     opacity: 1;

  1669.     -webkit-transform: scale(1);

  1670.             transform: scale(1);

  1671.   }

  1672. }

  1673. @keyframes zoomIn {

  1674.   0% {

  1675.     opacity: 1;

  1676.     -webkit-transform: scale(0);

  1677.             transform: scale(0);

  1678.   }

  1679.   100% {

  1680.     opacity: 1;

  1681.     -webkit-transform: scale(1);

  1682.             transform: scale(1);

  1683.   }

  1684. }

  1685. @-webkit-keyframes zoomOut {

  1686.   0% {

  1687.     opacity: 1;

  1688.     -webkit-transform: scale(1);

  1689.             transform: scale(1);

  1690.   }

  1691.   100% {

  1692.     opacity: 1;

  1693.     -webkit-transform: scale(0);

  1694.             transform: scale(0);

  1695.   }

  1696. }

  1697. @keyframes zoomOut {

  1698.   0% {

  1699.     opacity: 1;

  1700.     -webkit-transform: scale(1);

  1701.             transform: scale(1);

  1702.   }

  1703.   100% {

  1704.     opacity: 1;

  1705.     -webkit-transform: scale(0);

  1706.             transform: scale(0);

  1707.   }

  1708. }

  1709. 

  1710. 

  1711. /*******************************

  1712.        Static Animations

  1713. *******************************/

  1714. 

  1715. 

  1716. /*--------------

  1717.     Emphasis

  1718. ---------------*/

  1719. 

  1720. .flash.transition {

  1721.   -webkit-animation-duration: 750ms;

  1722.           animation-duration: 750ms;

  1723.   -webkit-animation-name: flash;

  1724.           animation-name: flash;

  1725. }

  1726. .shake.transition {

  1727.   -webkit-animation-duration: 750ms;

  1728.           animation-duration: 750ms;

  1729.   -webkit-animation-name: shake;

  1730.           animation-name: shake;

  1731. }

  1732. .bounce.transition {

  1733.   -webkit-animation-duration: 750ms;

  1734.           animation-duration: 750ms;

  1735.   -webkit-animation-name: bounce;

  1736.           animation-name: bounce;

  1737. }

  1738. .tada.transition {

  1739.   -webkit-animation-duration: 750ms;

  1740.           animation-duration: 750ms;

  1741.   -webkit-animation-name: tada;

  1742.           animation-name: tada;

  1743. }

  1744. .pulse.transition {

  1745.   -webkit-animation-duration: 500ms;

  1746.           animation-duration: 500ms;

  1747.   -webkit-animation-name: pulse;

  1748.           animation-name: pulse;

  1749. }

  1750. .jiggle.transition {

  1751.   -webkit-animation-duration: 750ms;

  1752.           animation-duration: 750ms;

  1753.   -webkit-animation-name: jiggle;

  1754.           animation-name: jiggle;

  1755. }

  1756. .transition.glow {

  1757.   -webkit-animation-duration: 2000ms;

  1758.           animation-duration: 2000ms;

  1759.   -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);

  1760.           animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);

  1761. }

  1762. .transition.glow {

  1763.   -webkit-animation-name: glow;

  1764.           animation-name: glow;

  1765. }

  1766. 

  1767. /* Flash */

  1768. @-webkit-keyframes flash {

  1769.   0%,

  1770.   50%,

  1771.   100% {

  1772.     opacity: 1;

  1773.   }

  1774.   25%,

  1775.   75% {

  1776.     opacity: 0;

  1777.   }

  1778. }

  1779. @keyframes flash {

  1780.   0%,

  1781.   50%,

  1782.   100% {

  1783.     opacity: 1;

  1784.   }

  1785.   25%,

  1786.   75% {

  1787.     opacity: 0;

  1788.   }

  1789. }

  1790. 

  1791. /* Shake */

  1792. @-webkit-keyframes shake {

  1793.   0%,

  1794.   100% {

  1795.     -webkit-transform: translateX(0);

  1796.             transform: translateX(0);

  1797.   }

  1798.   10%,

  1799.   30%,

  1800.   50%,

  1801.   70%,

  1802.   90% {

  1803.     -webkit-transform: translateX(-10px);

  1804.             transform: translateX(-10px);

  1805.   }

  1806.   20%,

  1807.   40%,

  1808.   60%,

  1809.   80% {

  1810.     -webkit-transform: translateX(10px);

  1811.             transform: translateX(10px);

  1812.   }

  1813. }

  1814. @keyframes shake {

  1815.   0%,

  1816.   100% {

  1817.     -webkit-transform: translateX(0);

  1818.             transform: translateX(0);

  1819.   }

  1820.   10%,

  1821.   30%,

  1822.   50%,

  1823.   70%,

  1824.   90% {

  1825.     -webkit-transform: translateX(-10px);

  1826.             transform: translateX(-10px);

  1827.   }

  1828.   20%,

  1829.   40%,

  1830.   60%,

  1831.   80% {

  1832.     -webkit-transform: translateX(10px);

  1833.             transform: translateX(10px);

  1834.   }

  1835. }

  1836. 

  1837. /* Bounce */

  1838. @-webkit-keyframes bounce {

  1839.   0%,

  1840.   20%,

  1841.   50%,

  1842.   80%,

  1843.   100% {

  1844.     -webkit-transform: translateY(0);

  1845.             transform: translateY(0);

  1846.   }

  1847.   40% {

  1848.     -webkit-transform: translateY(-30px);

  1849.             transform: translateY(-30px);

  1850.   }

  1851.   60% {

  1852.     -webkit-transform: translateY(-15px);

  1853.             transform: translateY(-15px);

  1854.   }

  1855. }

  1856. @keyframes bounce {

  1857.   0%,

  1858.   20%,

  1859.   50%,

  1860.   80%,

  1861.   100% {

  1862.     -webkit-transform: translateY(0);

  1863.             transform: translateY(0);

  1864.   }

  1865.   40% {

  1866.     -webkit-transform: translateY(-30px);

  1867.             transform: translateY(-30px);

  1868.   }

  1869.   60% {

  1870.     -webkit-transform: translateY(-15px);

  1871.             transform: translateY(-15px);

  1872.   }

  1873. }

  1874. 

  1875. /* Tada */

  1876. @-webkit-keyframes tada {

  1877.   0% {

  1878.     -webkit-transform: scale(1);

  1879.             transform: scale(1);

  1880.   }

  1881.   10%,

  1882.   20% {

  1883.     -webkit-transform: scale(0.9) rotate(-3deg);

  1884.             transform: scale(0.9) rotate(-3deg);

  1885.   }

  1886.   30%,

  1887.   50%,

  1888.   70%,

  1889.   90% {

  1890.     -webkit-transform: scale(1.1) rotate(3deg);

  1891.             transform: scale(1.1) rotate(3deg);

  1892.   }

  1893.   40%,

  1894.   60%,

  1895.   80% {

  1896.     -webkit-transform: scale(1.1) rotate(-3deg);

  1897.             transform: scale(1.1) rotate(-3deg);

  1898.   }

  1899.   100% {

  1900.     -webkit-transform: scale(1) rotate(0);

  1901.             transform: scale(1) rotate(0);

  1902.   }

  1903. }

  1904. @keyframes tada {

  1905.   0% {

  1906.     -webkit-transform: scale(1);

  1907.             transform: scale(1);

  1908.   }

  1909.   10%,

  1910.   20% {

  1911.     -webkit-transform: scale(0.9) rotate(-3deg);

  1912.             transform: scale(0.9) rotate(-3deg);

  1913.   }

  1914.   30%,

  1915.   50%,

  1916.   70%,

  1917.   90% {

  1918.     -webkit-transform: scale(1.1) rotate(3deg);

  1919.             transform: scale(1.1) rotate(3deg);

  1920.   }

  1921.   40%,

  1922.   60%,

  1923.   80% {

  1924.     -webkit-transform: scale(1.1) rotate(-3deg);

  1925.             transform: scale(1.1) rotate(-3deg);

  1926.   }

  1927.   100% {

  1928.     -webkit-transform: scale(1) rotate(0);

  1929.             transform: scale(1) rotate(0);

  1930.   }

  1931. }

  1932. 

  1933. /* Pulse */

  1934. @-webkit-keyframes pulse {

  1935.   0% {

  1936.     -webkit-transform: scale(1);

  1937.             transform: scale(1);

  1938.     opacity: 1;

  1939.   }

  1940.   50% {

  1941.     -webkit-transform: scale(0.9);

  1942.             transform: scale(0.9);

  1943.     opacity: 0.7;

  1944.   }

  1945.   100% {

  1946.     -webkit-transform: scale(1);

  1947.             transform: scale(1);

  1948.     opacity: 1;

  1949.   }

  1950. }

  1951. @keyframes pulse {

  1952.   0% {

  1953.     -webkit-transform: scale(1);

  1954.             transform: scale(1);

  1955.     opacity: 1;

  1956.   }

  1957.   50% {

  1958.     -webkit-transform: scale(0.9);

  1959.             transform: scale(0.9);

  1960.     opacity: 0.7;

  1961.   }

  1962.   100% {

  1963.     -webkit-transform: scale(1);

  1964.             transform: scale(1);

  1965.     opacity: 1;

  1966.   }

  1967. }

  1968. 

  1969. /* Jiggle */

  1970. @-webkit-keyframes jiggle {

  1971.   0% {

  1972.     -webkit-transform: scale3d(1, 1, 1);

  1973.             transform: scale3d(1, 1, 1);

  1974.   }

  1975.   30% {

  1976.     -webkit-transform: scale3d(1.25, 0.75, 1);

  1977.             transform: scale3d(1.25, 0.75, 1);

  1978.   }

  1979.   40% {

  1980.     -webkit-transform: scale3d(0.75, 1.25, 1);

  1981.             transform: scale3d(0.75, 1.25, 1);

  1982.   }

  1983.   50% {

  1984.     -webkit-transform: scale3d(1.15, 0.85, 1);

  1985.             transform: scale3d(1.15, 0.85, 1);

  1986.   }

  1987.   65% {

  1988.     -webkit-transform: scale3d(0.95, 1.05, 1);

  1989.             transform: scale3d(0.95, 1.05, 1);

  1990.   }

  1991.   75% {

  1992.     -webkit-transform: scale3d(1.05, 0.95, 1);

  1993.             transform: scale3d(1.05, 0.95, 1);

  1994.   }

  1995.   100% {

  1996.     -webkit-transform: scale3d(1, 1, 1);

  1997.             transform: scale3d(1, 1, 1);

  1998.   }

  1999. }

  2000. @keyframes jiggle {

  2001.   0% {

  2002.     -webkit-transform: scale3d(1, 1, 1);

  2003.             transform: scale3d(1, 1, 1);

  2004.   }

  2005.   30% {

  2006.     -webkit-transform: scale3d(1.25, 0.75, 1);

  2007.             transform: scale3d(1.25, 0.75, 1);

  2008.   }

  2009.   40% {

  2010.     -webkit-transform: scale3d(0.75, 1.25, 1);

  2011.             transform: scale3d(0.75, 1.25, 1);

  2012.   }

  2013.   50% {

  2014.     -webkit-transform: scale3d(1.15, 0.85, 1);

  2015.             transform: scale3d(1.15, 0.85, 1);

  2016.   }

  2017.   65% {

  2018.     -webkit-transform: scale3d(0.95, 1.05, 1);

  2019.             transform: scale3d(0.95, 1.05, 1);

  2020.   }

  2021.   75% {

  2022.     -webkit-transform: scale3d(1.05, 0.95, 1);

  2023.             transform: scale3d(1.05, 0.95, 1);

  2024.   }

  2025.   100% {

  2026.     -webkit-transform: scale3d(1, 1, 1);

  2027.             transform: scale3d(1, 1, 1);

  2028.   }

  2029. }

  2030. 

  2031. /* Glow */

  2032. @-webkit-keyframes glow {

  2033.   0% {

  2034.     background-color: #FCFCFD;

  2035.   }

  2036.   30% {

  2037.     background-color: #FFF6CD;

  2038.   }

  2039.   100% {

  2040.     background-color: #FCFCFD;

  2041.   }

  2042. }

  2043. @keyframes glow {

  2044.   0% {

  2045.     background-color: #FCFCFD;

  2046.   }

  2047.   30% {

  2048.     background-color: #FFF6CD;

  2049.   }

  2050.   100% {

  2051.     background-color: #FCFCFD;

  2052.   }

  2053. }

  2054. 

  2055. 

  2056. /*******************************

  2057.          Site Overrides

  2058. *******************************/