github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/src/themes/default/modules/transition.overrides (about)

     1  /*******************************
     2            Transitions
     3  *******************************/
     4  
     5  /*
     6    Some transitions adapted from Animate CSS
     7    https://github.com/daneden/animate.css
     8  
     9    Additional transitions adapted from Glide
    10    by Nick Pettit - https://github.com/nickpettit/glide
    11  */
    12  
    13  /*--------------
    14       Browse
    15  ---------------*/
    16  
    17  .transition.browse {
    18    animation-duration: 500ms;
    19  }
    20  .transition.browse.in {
    21    animation-name: browseIn;
    22  }
    23  .transition.browse.out,
    24  .transition.browse.left.out {
    25    animation-name: browseOutLeft;
    26  }
    27  .transition.browse.right.out {
    28    animation-name: browseOutRight;
    29  }
    30  
    31  /* In */
    32  @keyframes browseIn {
    33    0% {
    34      transform: scale(0.8) translateZ(0px);
    35      z-index: -1;
    36    }
    37    10% {
    38      transform: scale(0.8) translateZ(0px);
    39      z-index: -1;
    40      opacity: 0.7;
    41    }
    42    80% {
    43      transform: scale(1.05) translateZ(0px);
    44      opacity: 1;
    45      z-index: 999;
    46    }
    47    100% {
    48      transform: scale(1) translateZ(0px);
    49      z-index: 999;
    50    }
    51  }
    52  
    53  /* Out */
    54  @keyframes browseOutLeft {
    55    0% {
    56      z-index: 999;
    57      transform: translateX(0%) rotateY(0deg) rotateX(0deg);
    58    }
    59    50% {
    60      z-index: -1;
    61      transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
    62    }
    63    80% {
    64      opacity: 1;
    65    }
    66    100% {
    67      z-index: -1;
    68      transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
    69      opacity: 0;
    70    }
    71  }
    72  @keyframes browseOutRight {
    73    0% {
    74      z-index: 999;
    75      transform: translateX(0%) rotateY(0deg) rotateX(0deg);
    76    }
    77    50% {
    78      z-index: 1;
    79      transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
    80    }
    81    80% {
    82      opacity: 1;
    83    }
    84    100% {
    85      z-index: 1;
    86      transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
    87      opacity: 0;
    88    }
    89  }
    90  
    91  
    92  /*--------------
    93       Drop
    94  ---------------*/
    95  
    96  .drop.transition {
    97    transform-origin: top center;
    98    animation-duration: 500ms;
    99    animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
   100  }
   101  .drop.transition.in {
   102    animation-name: dropIn;
   103  }
   104  .drop.transition.out {
   105    animation-name: dropOut;
   106  }
   107  
   108  /* Drop */
   109  @keyframes dropIn {
   110    0% {
   111      opacity: 0;
   112      transform: scale(0);
   113    }
   114    100% {
   115      opacity: 1;
   116      transform: scale(1);
   117    }
   118  }
   119  @keyframes dropOut {
   120    0% {
   121      opacity: 1;
   122      transform: scale(1);
   123    }
   124    100% {
   125      opacity: 0;
   126      transform: scale(0);
   127    }
   128  }
   129  
   130  /*--------------
   131        Fade
   132  ---------------*/
   133  
   134  .transition.fade.in {
   135    animation-name: fadeIn;
   136  }
   137  .transition[class*="fade up"].in {
   138    animation-name: fadeInUp;
   139  }
   140  .transition[class*="fade down"].in {
   141    animation-name: fadeInDown;
   142  }
   143  .transition[class*="fade left"].in {
   144    animation-name: fadeInLeft;
   145  }
   146  .transition[class*="fade right"].in {
   147    animation-name: fadeInRight;
   148  }
   149  
   150  .transition.fade.out {
   151    animation-name: fadeOut;
   152  }
   153  .transition[class*="fade up"].out {
   154    animation-name: fadeOutUp;
   155  }
   156  .transition[class*="fade down"].out {
   157    animation-name: fadeOutDown;
   158  }
   159  .transition[class*="fade left"].out {
   160    animation-name: fadeOutLeft;
   161  }
   162  .transition[class*="fade right"].out {
   163    animation-name: fadeOutRight;
   164  }
   165  
   166  /* In */
   167  @keyframes fadeIn {
   168    0% {
   169      opacity: 0;
   170    }
   171    100% {
   172      opacity: 1;
   173    }
   174  }
   175  @keyframes fadeInUp {
   176    0% {
   177      opacity: 0;
   178      transform: translateY(10%);
   179    }
   180    100% {
   181      opacity: 1;
   182      transform: translateY(0%);
   183    }
   184  }
   185  @keyframes fadeInDown {
   186    0% {
   187      opacity: 0;
   188      transform: translateY(-10%);
   189    }
   190    100% {
   191      opacity: 1;
   192      transform: translateY(0%);
   193    }
   194  }
   195  @keyframes fadeInLeft {
   196    0% {
   197      opacity: 0;
   198      transform: translateX(10%);
   199    }
   200    100% {
   201      opacity: 1;
   202      transform: translateX(0%);
   203    }
   204  }
   205  @keyframes fadeInRight {
   206    0% {
   207      opacity: 0;
   208      transform: translateX(-10%);
   209    }
   210    100% {
   211      opacity: 1;
   212      transform: translateX(0%);
   213    }
   214  }
   215  
   216  /* Out */
   217  @keyframes fadeOut {
   218    0% {
   219      opacity: 1;
   220    }
   221    100% {
   222      opacity: 0;
   223    }
   224  }
   225  @keyframes fadeOutUp {
   226    0% {
   227      opacity: 1;
   228      transform: translateY(0%);
   229    }
   230    100% {
   231      opacity: 0;
   232      transform: translateY(10%);
   233    }
   234  }
   235  @keyframes fadeOutDown {
   236    0% {
   237      opacity: 1;
   238      transform: translateY(0%);
   239    }
   240    100% {
   241      opacity: 0;
   242      transform: translateY(-10%);
   243    }
   244  }
   245  @keyframes fadeOutLeft {
   246    0% {
   247      opacity: 1;
   248      transform: translateX(0%);
   249    }
   250    100% {
   251      opacity: 0;
   252      transform: translateX(10%);
   253    }
   254  }
   255  @keyframes fadeOutRight {
   256    0% {
   257      opacity: 1;
   258      transform: translateX(0%);
   259    }
   260    100% {
   261      opacity: 0;
   262      transform: translateX(-10%);
   263    }
   264  }
   265  
   266  /*--------------
   267       Flips
   268  ---------------*/
   269  
   270  .flip.transition.in,
   271  .flip.transition.out {
   272    animation-duration: 600ms;
   273    perspective: 2000px;
   274  }
   275  .horizontal.flip.transition.in {
   276    animation-name: horizontalFlipIn;
   277  }
   278  .horizontal.flip.transition.out {
   279    animation-name: horizontalFlipOut;
   280  }
   281  .vertical.flip.transition.in {
   282    animation-name: verticalFlipIn;
   283  }
   284  .vertical.flip.transition.out {
   285    animation-name: verticalFlipOut;
   286  }
   287  
   288  /* In */
   289  @keyframes horizontalFlipIn {
   290    0% {
   291      transform: perspective(2000px) rotateY(-90deg);
   292      opacity: 0;
   293    }
   294    100% {
   295      transform: perspective(2000px) rotateY(0deg);
   296      opacity: 1;
   297    }
   298  }
   299  @keyframes verticalFlipIn {
   300    0% {
   301      transform: perspective(2000px) rotateX(-90deg);
   302      opacity: 0;
   303    }
   304    100% {
   305      transform: perspective(2000px) rotateX(0deg);
   306      opacity: 1;
   307    }
   308  }
   309  
   310  /* Out */
   311  @keyframes horizontalFlipOut {
   312    0% {
   313      transform: perspective(2000px) rotateY(0deg);
   314      opacity: 1;
   315    }
   316    100% {
   317      transform: perspective(2000px) rotateY(90deg);
   318      opacity: 0;
   319    }
   320  }
   321  @keyframes verticalFlipOut {
   322    0% {
   323      transform: perspective(2000px) rotateX(0deg);
   324      opacity: 1;
   325    }
   326    100% {
   327      transform: perspective(2000px) rotateX(-90deg);
   328      opacity: 0;
   329    }
   330  }
   331  
   332  /*--------------
   333        Scale
   334  ---------------*/
   335  
   336  .scale.transition.in {
   337    animation-name: scaleIn;
   338  }
   339  .scale.transition.out {
   340    animation-name: scaleOut;
   341  }
   342  
   343  /* In */
   344  @keyframes scaleIn {
   345    0% {
   346      opacity: 0;
   347      transform: scale(0.7);
   348    }
   349    100% {
   350      opacity: 1;
   351      transform: scale(1);
   352    }
   353  }
   354  
   355  /* Out */
   356  @keyframes scaleOut {
   357    0% {
   358      opacity: 1;
   359      transform: scale(1);
   360    }
   361    100% {
   362      opacity: 0;
   363      transform: scale(0.7);
   364    }
   365  }
   366  
   367  /*--------------
   368        Fly
   369  ---------------*/
   370  
   371  /* Inward */
   372  .transition.fly {
   373    animation-duration: 0.6s;
   374    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
   375  }
   376  .transition.fly.in {
   377    animation-name: flyIn;
   378  }
   379  .transition[class*="fly up"].in {
   380    animation-name: flyInUp;
   381  }
   382  .transition[class*="fly down"].in {
   383    animation-name: flyInDown;
   384  }
   385  .transition[class*="fly left"].in {
   386    animation-name: flyInLeft;
   387  }
   388  .transition[class*="fly right"].in {
   389    animation-name: flyInRight;
   390  }
   391  
   392  /* Outward */
   393  .transition.fly.out {
   394    animation-name: flyOut;
   395  }
   396  .transition[class*="fly up"].out {
   397    animation-name: flyOutUp;
   398  }
   399  .transition[class*="fly down"].out {
   400    animation-name: flyOutDown;
   401  }
   402  .transition[class*="fly left"].out {
   403    animation-name: flyOutLeft;
   404  }
   405  .transition[class*="fly right"].out {
   406    animation-name: flyOutRight;
   407  }
   408  
   409  /* In */
   410  @keyframes flyIn {
   411    0% {
   412      opacity: 0;
   413      transform: scale3d(.3, .3, .3);
   414    }
   415    20% {
   416      transform: scale3d(1.1, 1.1, 1.1);
   417    }
   418    40% {
   419      transform: scale3d(.9, .9, .9);
   420    }
   421    60% {
   422      opacity: 1;
   423      transform: scale3d(1.03, 1.03, 1.03);
   424    }
   425    80% {
   426      transform: scale3d(.97, .97, .97);
   427    }
   428    100% {
   429      opacity: 1;
   430      transform: scale3d(1, 1, 1);
   431    }
   432  }
   433  @keyframes flyInUp {
   434    0% {
   435      opacity: 0;
   436      transform: translate3d(0, 1500px, 0);
   437    }
   438    60% {
   439      opacity: 1;
   440      transform: translate3d(0, -20px, 0);
   441    }
   442    75% {
   443      transform: translate3d(0, 10px, 0);
   444    }
   445    90% {
   446      transform: translate3d(0, -5px, 0);
   447    }
   448    100% {
   449      transform: translate3d(0, 0, 0);
   450    }
   451  }
   452  @keyframes flyInDown {
   453    0% {
   454      opacity: 0;
   455      transform: translate3d(0, -1500px, 0);
   456    }
   457    60% {
   458      opacity: 1;
   459      transform: translate3d(0, 25px, 0);
   460    }
   461    75% {
   462      transform: translate3d(0, -10px, 0);
   463    }
   464    90% {
   465      transform: translate3d(0, 5px, 0);
   466    }
   467    100% {
   468      transform: none;
   469    }
   470  }
   471  @keyframes flyInLeft {
   472    0% {
   473      opacity: 0;
   474      transform: translate3d(1500px, 0, 0);
   475    }
   476    60% {
   477      opacity: 1;
   478      transform: translate3d(-25px, 0, 0);
   479    }
   480    75% {
   481      transform: translate3d(10px, 0, 0);
   482    }
   483    90% {
   484      transform: translate3d(-5px, 0, 0);
   485    }
   486    100% {
   487      transform: none;
   488    }
   489  }
   490  @keyframes flyInRight {
   491    0% {
   492      opacity: 0;
   493      transform: translate3d(-1500px, 0, 0);
   494    }
   495    60% {
   496      opacity: 1;
   497      transform: translate3d(25px, 0, 0);
   498    }
   499    75% {
   500      transform: translate3d(-10px, 0, 0);
   501    }
   502    90% {
   503      transform: translate3d(5px, 0, 0);
   504    }
   505    100% {
   506      transform: none;
   507    }
   508  }
   509  
   510  /* Out */
   511  @keyframes flyOut {
   512    20% {
   513      transform: scale3d(.9, .9, .9);
   514    }
   515    50%, 55% {
   516      opacity: 1;
   517      transform: scale3d(1.1, 1.1, 1.1);
   518    }
   519    100% {
   520      opacity: 0;
   521      transform: scale3d(.3, .3, .3);
   522    }
   523  }
   524  @keyframes flyOutUp {
   525    20% {
   526      transform: translate3d(0, 10px, 0);
   527    }
   528    40%, 45% {
   529      opacity: 1;
   530      transform: translate3d(0, -20px, 0);
   531    }
   532    100% {
   533      opacity: 0;
   534      transform: translate3d(0, 2000px, 0);
   535    }
   536  }
   537  @keyframes flyOutDown {
   538    20% {
   539      transform: translate3d(0, -10px, 0);
   540    }
   541    40%, 45% {
   542      opacity: 1;
   543      transform: translate3d(0, 20px, 0);
   544    }
   545    100% {
   546      opacity: 0;
   547      transform: translate3d(0, -2000px, 0);
   548    }
   549  }
   550  @keyframes flyOutRight {
   551    20% {
   552      opacity: 1;
   553      transform: translate3d(20px, 0, 0);
   554    }
   555    100% {
   556      opacity: 0;
   557      transform: translate3d(-2000px, 0, 0);
   558    }
   559  }
   560  @keyframes flyOutLeft {
   561    20% {
   562      opacity: 1;
   563      transform: translate3d(-20px, 0, 0);
   564    }
   565    100% {
   566      opacity: 0;
   567      transform: translate3d(2000px, 0, 0);
   568    }
   569  }
   570  
   571  /*--------------
   572       Slide
   573  ---------------*/
   574  
   575  .transition.slide.in,
   576  .transition[class*="slide down"].in {
   577    animation-name: slideInY;
   578    transform-origin: top center;
   579  }
   580  .transition[class*="slide up"].in {
   581    animation-name: slideInY;
   582    transform-origin: bottom center;
   583  }
   584  .transition[class*="slide left"].in {
   585    animation-name: slideInX;
   586    transform-origin: center right;
   587  }
   588  .transition[class*="slide right"].in {
   589    animation-name: slideInX;
   590    transform-origin: center left;
   591  }
   592  
   593  .transition.slide.out,
   594  .transition[class*="slide down"].out {
   595    animation-name: slideOutY;
   596    transform-origin: top center;
   597  }
   598  .transition[class*="slide up"].out {
   599    animation-name: slideOutY;
   600    transform-origin: bottom center;
   601  }
   602  .transition[class*="slide left"].out {
   603    animation-name: slideOutX;
   604    transform-origin: center right;
   605  }
   606  .transition[class*="slide right"].out {
   607    animation-name: slideOutX;
   608    transform-origin: center left;
   609  }
   610  
   611  /* In */
   612  @keyframes slideInY {
   613    0% {
   614      opacity: 0;
   615      transform: scaleY(0);
   616    }
   617    100% {
   618      opacity: 1;
   619      transform: scaleY(1);
   620    }
   621  }
   622  @keyframes slideInX {
   623    0% {
   624      opacity: 0;
   625      transform: scaleX(0);
   626    }
   627    100% {
   628      opacity: 1;
   629      transform: scaleX(1);
   630    }
   631  }
   632  
   633  /* Out */
   634  @keyframes slideOutY {
   635    0% {
   636      opacity: 1;
   637      transform: scaleY(1);
   638    }
   639    100% {
   640      opacity: 0;
   641      transform: scaleY(0);
   642    }
   643  }
   644  @keyframes slideOutX {
   645    0% {
   646      opacity: 1;
   647      transform: scaleX(1);
   648    }
   649    100% {
   650      opacity: 0;
   651      transform: scaleX(0);
   652    }
   653  }
   654  
   655  
   656  /*--------------
   657       Swing
   658  ---------------*/
   659  
   660  .transition.swing {
   661    animation-duration: 800ms;
   662  }
   663  
   664  .transition[class*="swing down"].in {
   665    animation-name: swingInX;
   666    transform-origin: top center;
   667  }
   668  .transition[class*="swing up"].in {
   669    animation-name: swingInX;
   670    transform-origin: bottom center;
   671  }
   672  .transition[class*="swing left"].in {
   673    animation-name: swingInY;
   674    transform-origin: center right;
   675  }
   676  .transition[class*="swing right"].in {
   677    animation-name: swingInY;
   678    transform-origin: center left;
   679  }
   680  
   681  .transition.swing.out,
   682  .transition[class*="swing down"].out {
   683    animation-name: swingOutX;
   684    transform-origin: top center;
   685  }
   686  .transition[class*="swing up"].out {
   687    animation-name: swingOutX;
   688    transform-origin: bottom center;
   689  }
   690  .transition[class*="swing left"].out {
   691    animation-name: swingOutY;
   692    transform-origin: center right;
   693  }
   694  .transition[class*="swing right"].out {
   695    animation-name: swingOutY;
   696    transform-origin: center left;
   697  }
   698  
   699  /* In */
   700  @keyframes swingInX {
   701    0% {
   702      transform: perspective(1000px) rotateX(90deg);
   703      opacity: 0;
   704    }
   705    40% {
   706      transform: perspective(1000px) rotateX(-30deg);
   707      opacity: 1;
   708    }
   709    60% {
   710      transform: perspective(1000px) rotateX(15deg);
   711    }
   712    80% {
   713      transform: perspective(1000px) rotateX(-7.5deg);
   714    }
   715    100% {
   716      transform: perspective(1000px) rotateX(0deg);
   717    }
   718  }
   719  @keyframes swingInY {
   720    0% {
   721      transform: perspective(1000px) rotateY(-90deg);
   722      opacity: 0;
   723    }
   724    40% {
   725      transform: perspective(1000px) rotateY(30deg);
   726      opacity: 1;
   727    }
   728    60% {
   729      transform: perspective(1000px) rotateY(-17.5deg);
   730    }
   731    80% {
   732      transform: perspective(1000px) rotateY(7.5deg);
   733    }
   734    100% {
   735      transform: perspective(1000px) rotateY(0deg);
   736    }
   737  }
   738  
   739  /* Out */
   740  @keyframes swingOutX {
   741    0% {
   742      transform: perspective(1000px) rotateX(0deg);
   743    }
   744    40% {
   745      transform: perspective(1000px) rotateX(-7.5deg);
   746    }
   747    60% {
   748      transform: perspective(1000px) rotateX(17.5deg);
   749    }
   750    80% {
   751      transform: perspective(1000px) rotateX(-30deg);
   752      opacity: 1;
   753    }
   754    100% {
   755      transform: perspective(1000px) rotateX(90deg);
   756      opacity: 0;
   757    }
   758  }
   759  @keyframes swingOutY {
   760    0% {
   761      transform: perspective(1000px) rotateY(0deg);
   762    }
   763    40% {
   764      transform: perspective(1000px) rotateY(7.5deg);
   765    }
   766    60% {
   767      transform: perspective(1000px) rotateY(-10deg);
   768    }
   769    80% {
   770      transform: perspective(1000px) rotateY(30deg);
   771      opacity: 1;
   772    }
   773    100% {
   774      transform: perspective(1000px) rotateY(-90deg);
   775      opacity: 0;
   776    }
   777  }
   778  
   779  
   780  /*******************************
   781         Static Animations
   782  *******************************/
   783  
   784  /*--------------
   785      Emphasis
   786  ---------------*/
   787  
   788  .flash.transition {
   789    animation-duration: 750ms;
   790    animation-name: flash;
   791  }
   792  .shake.transition {
   793    animation-duration: 750ms;
   794    animation-name: shake;
   795  }
   796  .bounce.transition {
   797    animation-duration: 750ms;
   798    animation-name: bounce;
   799  }
   800  .tada.transition {
   801    animation-duration: 750ms;
   802    animation-name: tada;
   803  }
   804  .pulse.transition {
   805    animation-duration: 500ms;
   806    animation-name: pulse;
   807  }
   808  .jiggle.transition {
   809    animation-duration: 750ms;
   810    animation-name: jiggle;
   811  }
   812  
   813  /* Flash */
   814  @keyframes flash {
   815    0%, 50%, 100% {
   816      opacity: 1;
   817    }
   818    25%, 75% {
   819      opacity: 0;
   820    }
   821  }
   822  
   823  /* Shake */
   824  @keyframes shake {
   825    0%, 100% {
   826      transform: translateX(0);
   827    }
   828    10%, 30%, 50%, 70%, 90% {
   829      transform: translateX(-10px);
   830    }
   831    20%, 40%, 60%, 80% {
   832      transform: translateX(10px);
   833    }
   834  }
   835  
   836  /* Bounce */
   837  @keyframes bounce {
   838    0%, 20%, 50%, 80%, 100% {
   839      transform: translateY(0);
   840    }
   841    40% {
   842      transform: translateY(-30px);
   843    }
   844    60% {
   845      transform: translateY(-15px);
   846    }
   847  }
   848  
   849  /* Tada */
   850  @keyframes tada {
   851    0% {
   852      transform: scale(1);
   853    }
   854    10%, 20% {
   855      transform: scale(0.9) rotate(-3deg);
   856    }
   857    30%, 50%, 70%, 90% {
   858      transform: scale(1.1) rotate(3deg);
   859    }
   860    40%, 60%, 80% {
   861      transform: scale(1.1) rotate(-3deg);
   862    }
   863    100% {
   864      transform: scale(1) rotate(0);
   865    }
   866  }
   867  
   868  /* Pulse */
   869  @keyframes pulse {
   870    0% {
   871      transform: scale(1);
   872      opacity: 1;
   873    }
   874    50% {
   875      transform: scale(0.9);
   876      opacity: 0.7;
   877    }
   878    100% {
   879      transform: scale(1);
   880      opacity: 1;
   881    }
   882  
   883  }
   884  
   885  /* Rubberband */
   886  @keyframes jiggle {
   887    0% {
   888      transform: scale3d(1, 1, 1);
   889    }
   890    30% {
   891      transform: scale3d(1.25, 0.75, 1);
   892    }
   893    40% {
   894      transform: scale3d(0.75, 1.25, 1);
   895    }
   896    50% {
   897      transform: scale3d(1.15, 0.85, 1);
   898    }
   899    65% {
   900      transform: scale3d(.95, 1.05, 1);
   901    }
   902    75% {
   903      transform: scale3d(1.05, .95, 1);
   904    }
   905    100% {
   906      transform: scale3d(1, 1, 1);
   907    }
   908  }
   909  
   910  
   911