github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/dist/components/transition.css (about)

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